单击按钮时,我想通过Material Table添加行 . 但我似乎无法在我的表上调用renderRows()方法 .
以下是我的代码中的一些相关内容:
<div fxFlex="20%" fxLayout="row" fxLayoutAlign="center">
<input fxFlex="10%" matInput placeholder="Part #" type="number" [(ngModel)]="partNumber">
<input fxFlex="20%" matInput placeholder="Video Url" type="text" [(ngModel)]="videoUrl">
<input fxFlex="40%" matInput placeholder="Download Url" type="text" [(ngModel)]="downloadUrl">
<button mat-button [disabled]="partNumber == null || videoUrl == null" (click)="addVideo()"> <-- I would like my table to update on this click
Add Video
</button>
</div>
<div *ngIf="urlCollection.length > 0">
<mat-table #videoTable videoTable [dataSource]="dataSource">
<-- Table columns -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
在TS方面:
addVideo()
{
// get data from the the inputs and add it to the table data collection;
// Ideally I would like to have the renderRow here.
}
我试过在按钮点击事件中调用renderRows(),如下所示:
<button mat-button [disabled]="partNumber == null || videoUrl == null" (click)="addVideo(); videoTable.renderRows()">
像这样:
<button mat-button [disabled]="partNumber == null || videoUrl == null" (click)="addVideo(); videoTable.table.renderRows()">
我得到一个错误,就像“无法在undefined上调用renderRow()”
我试过在我的typescript方法中调用renderRows()方法,如下所示:
@ViewChild('videoTable') videoTable: MatTableModule;
// rest of the component
addVideo()
{
// add to the datasource collection
this.videoTable.renderRows();
}
我得到一个“属性'renderRows'在类型'MatTableModule'上不存在”错误 .
单击按钮并更新数据源时,如何更新my表?
1 回答
您使用错误的类型声明了
videoTable
,它应该是MatTable
.试试下面的代码示例:
参考工作 demo .