当有人添加新记录时,可以通过以下方法更新mat-table数据源:
以下是一个示例代码:
在组件中定义数据源数组:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
dataSource: any[] = [
{ id: 1, name: 'Record 1' },
{ id: 2, name: 'Record 2' },
{ id: 3, name: 'Record 3' }
];
constructor(private cdr: ChangeDetectorRef) { }
ngOnInit() {
}
addRecord() {
const newRecord = { id: 4, name: 'Record 4' };
this.dataSource.push(newRecord);
this.cdr.detectChanges();
}
}
在模板中使用mat-table来显示数据源:
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let record">{{ record.id }}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let record">{{ record.name }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['id', 'name']"></tr>
<tr mat-row *matRowDef="let row; columns: ['id', 'name']"></tr>
</table>
<button (click)="addRecord()">Add Record</button>
在上述示例中,当点击"Add Record"按钮时,会将新记录添加到数据源数组中,并通过调用ChangeDetectorRef的detectChanges()方法来更新视图。
请注意,以上示例中的代码仅为演示目的,实际应用中可能需要根据具体情况进行适当的修改和优化。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。
领取专属 10元无门槛券
手把手带您无忧上云