マテリアル2 - 同じページの2つのダイナミックmdテーブルは動作しません

Question

同じページに2つのコンポーネントを追加しても、同じことをしないのはなぜですか？しかし、これだけ、このようなトップ

で最初に：

<h1>Angualr + Material</h1> 
<button md-raised-button (click)="addEvent()">Add row for all ... to array</button> 
<br><br> 
<table-cart [tableData]="tableData"></table-cart> 
<br><br> 
<span>The same page but other place for example in other tab</span> 
<br><br> 
<table-cart [tableData]="tableData"></table-cart> 

https://plnkr.co/edit/YFL0wdGGXrwtjs4Exrx1?p=preview

Answer 1

理由は、あなたがViewChildを使用していることです。指定された要素の最初のインスタンスを取得します。代わりにViewChildrenを使用し、すべてを繰り返して更新する必要があります。あなたのplunkerコードで

、これに@ViewChild行を変更：

@ViewChildren(TableCartComponent) tableCarts: QueryList<TableCartComponent> 

...とあなたaddEvent方法は、このなります：

addEvent() { 
     this.tableData.push({ 
      lp: this.tableData.length + 1, 
      name: "name like...", 
      code: "1111", 
      color: "blue", 
      size: "S", 
      price: "99.99" 
     }); 
     this.tableCarts.forEach(tableCart => tableCart.update()); 
     //this.TableCart.update(); 
    } 

---

ここに更新されたリンクへのリンクがありますPLUNKER DEMO