角新手在这里。在搜索了多个问题后，我找不到解决这个问题的方法：我正在尝试将子组件从模板中取出。它可以按预期工作，AfterViewInit但是当尝试从其他组件中获取它时，它将无法工作，返回未定义。你能帮我弄清楚我错过了什么吗？提前致谢，祝您有美好的一天！
选项卡.ts
@Component({
selector: 'tab',
template: `<products #productList></products>
`,
})
export class Tab implements AfterViewInit {
@ViewChildren("productList")
public products: QueryList<Products>;
title: string;
ngAfterViewInit(): void {
console.log(this.products.first.myForm.value);
}
}
选项卡.ts
@Component({
selector: 'tabs',
template: `<md-tab-group>
<md-tab *ngFor="let tab of tabs let i=index" label="{{tab.title}}">
<tab></tab>
<button (click)="removeTab(tab)">Remove tab</button>
</md-tab>
</md-tab-group>
<button (click)="addTab()">Add new tab</button>`,
})
export class Tabs implements AfterViewInit {
tabs: Tab[] = [];
ngAfterViewInit(): void {
this.addTab();
}
addTab() {
var tabsLength=this.tabs.length;
if (tabsLength< 5) {
var tab = new Tab();
tab.title = "List " + (tabsLength + 1);
this.tabs.push(tab);
}
else {
console.log("CANNOT ADD NEW TAB, LIMIT REACHED");
}
}
removeTab(tab: Tab) {
var index = this.tabs.indexOf(tab)
if (tab.products.first.isDeletable()) {
this.tabs.splice(index, 1);
}
else {
console.log("CANNOT REMOVE TAB!")
}
}
}
产品.ts
@Component({
moduleId: module.id,
selector: 'products',
templateUrl: '/app/Templates/products.component.html',
})
export class Products implements OnInit {
public myForm: FormGroup;
constructor(private _fb: FormBuilder) {
}
ngOnInit(): void {
this.myForm = this._fb.group({
products: this._fb.array([
this.initProduct(),
])
, grandTotal: ['']
});
this.myForm.controls['products'].valueChanges.subscribe((change) => {
this.myForm.controls["grandTotal"].setValue(this.computeTotal());
});
}
initProduct() {
return this._fb.group({
name: [''],
price: ['', Validators.required],
quantity: ['', Validators.required],
total: [''],
});
}
isDeletable(): boolean {
const grandTotal = this.myForm.controls['grandTotal'].value;
if (grandTotal > 0) {
console.log("CANNOT DELETE!")
return false;
}
return true;
}
}