1
ここでは角の初心者です。 複数の質問を検索した後、私はこの問題を修正できませんでした。 子要素をテンプレートから取得しようとしています。 AfterViewInitでは期待通りに動作しますが、他のコンポーネントから取得しようとするとうまく動作せず、未定義に戻ります。私が逃していることを理解するのを助けてくれますか？ おかげさまで、ありがとうございました！Angular2 @ViewChildrenは他のコンポーネントでは定義されていません。
tab.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);
}
}
tabs.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!")
}
}
}
products.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;
}
}