如果组件中有多个表，如何获取Mat-Table的实例
如果组件中有多个表，如何获取Mat-Table的实例
提问于 2019-03-18 01:44:21
我遇到了一些问题。我在Angular 6中有一个组件，在那里我用数据生成了多个Mat-Table。我在div标记中使用ng-for循环来遍历所有Mat-Table数据源。稍后，我尝试向表中添加新行。到这里为止，一切都很好，但是我不能获得这个Add Row函数所针对的表的实例。在.ts fenter代码中，在View-Child的帮助下，我总是只获取第一个表的实例。我想要获取所有表的实例，使用它我将调用render rows函数来刷新视图中选定的MatTable
粘贴视图和TS文件的示例代码。注意: Add现在不起作用。
<div *ngFor="let data of ViewContent">
<button (click)="addElement(event,data?.tableValues,displayedColumns)">Add element</button> <br />
<table #testTable mat-table [dataSource]="data?.tableValues">
<!-- Col1 Column -->
<ng-container matColumnDef="Col1">
<th mat-header-cell *matHeaderCellDef> Col1 </th>
<td mat-cell *matCellDef="let element"> {{element.Col1}} </td>
</ng-container>
<!-- Col2 Column -->
<ng-container matColumnDef="Col2">
<th mat-header-cell *matHeaderCellDef> Col2 </th>
<td mat-cell *matCellDef="let element"> {{element.Col2}} </td>
</ng-container>
<!-- Col3 Column -->
<ng-container matColumnDef="Col3">
<th mat-header-cell *matHeaderCellDef> Col3 </th>
<td mat-cell *matCellDef="let element"> {{element.Col3}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!-- Copyright 2019 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license -->
</div>
import {DataSource} from '@angular/cdk/collections';
import {Component,OnInit,ViewChild} from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs';
import DalContentdata from 'Content.json';
import { MatTable } from '@angular/material';
@Component({
selector: 'cdk-table-basic-example',
styleUrls: ['cdk-table-basic-example.css'],
templateUrl: 'cdk-table-basic-example.html',
})
export class CdkTableBasicExample implements OnInit {
ViewContent: Object;
displayedColumns: string[] = ['Col1','Col2','Col3'];
@ViewChild('testTable') table: MatTable<any>;
ngOnInit() {
this.ViewContent = [
{
"title":"abc",
"tableValues": [
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
}
]
},
{
"title":"abc",
"displayColumns": "Col1,Col2,Col3",
"tableValues": [
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
}
]
},
{
"title":"abc",
"displayColumns": "Col1,Col2,Col3",
"tableValues": [
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
},
{
"Col1": "Apple",
"Col2": "Mango",
"Col3": "Orange"
}
]
}
];
}
addElement(event, title, tableDataSource, displayColumns) {
console.log('beforeAdd', tableDataSource);
tableDataSource.push({
Col1: 'Test',Col2:'Test',Col3:'Test'
})
console.log('afteradd', tableDataSource);
this.table.renderRows();
console.log('afteradd', tableDataSource);
}
}
/** Copyright 2019 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */回答 3
Stack Overflow用户
发布于 2019-05-07 21:01:59
我遇到了类似的问题，并通过使用ViewChildren而不是ViewChild解决了这个问题。
我最初有：
@ViewChild(MatTable) table: MatTable<string>;为了给renderRows打电话，我打电话给
this.table.renderRows();但是，我随后需要同一组件中的另一个表，因此我的代码更改为：
@ViewChildren(MatTable) table !: QueryList<MatTable<string>>;和
this.table.first.renderRows();
this.table.last.renderRows();首先和最后是queryList的属性。https://angular.io/api/core/QueryList#properties
确保您正在导入MatTable
import { MatTable } from "@angular/material/table";Stack Overflow用户
发布于 2019-03-18 01:52:05
您应该使用ViewChild。
html:让我们假设您的表在一个for循环中运行，其中包含名为i的索引变量：
<table id="testTable{{i}}" [dataSource]="yourDataSource"><!--data source can be set from ts as well-->ts：
@ViewChild('testTable1') matTable1: MatTable<any>;
@ViewChild('testTable2') matTable2: MatTable<any>;
@ViewChild('testTable3') matTable3: MatTable<any>;当然，也可以只使用数组。
别忘了导入它，你会更喜欢使用AfterViewInit生命周期钩子
ngAfterViewInit() {
// this.matTable...
}编辑：
如果要刷新数据源
this.matTable.dataSource=...this.data
您只需传递新的数组(具有新的引用)，它将触发数据更改，您的数据表将刷新
如果您希望使用for为每个表创建unic ID，
Stack Overflow用户
发布于 2020-01-03 20:18:26
在html中：
<table
mat-table
id="table"
class="full-width"
[dataSource]="dataSource"
matSort
data-cy="pg_table"
(matSortChange)="onSortData($event)"
#table1
>在模板中：
@ViewChild('table1', { static: true }) table1: MatTable<any>;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55210035
复制相关文章
相似问题