Material2 - 同一页面上的两个动态 md-table，不起作用

Question

为什么如果我在同一页面上添加两个组件，那么这些组件 "do" 不一样？但首先只有这个在顶部

像这样：

<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 并遍历所有内容并进行更新。

In your plunker code, change @ViewChild line to this:

@ViewChildren(TableCartComponent) tableCarts: QueryList<TableCartComponent>

... and your addEvent method will become this:

    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();
    }

这是更新后的linkPLUNKER DEMO

Material2 - 同一页面上的两个动态 md-table，不起作用

Material2 - Two dynamic md-table on the same page, don't work

angular-material

angular-material2

angular