如何刷新MatTable中的dataSource

Question

我有一个组件，它有一个带有后台数据的mat表。在这个组件中，我有另一个，它是在这个数据中添加新元素的表单。

它工作得很好，我可以在表中显示数据，我可以添加元素，但添加元素后，我的表不会刷新数据。

这是我的代码：

添加词：

addWord(): void {
const value = this.addWordForm.value;
console.log(value)
this.wordService.create(value).subscribe(
(word: Word)  => {
console.info('Word added');
},
(error: Error) =>  {
console.error(error);
}
);

create(data: Word): Observable<Word> {
return this.http.post<Word>(this.baseUrl, data);

数据来源：

ngAfterViewInit(): void {
this.wordService.getAll().subscribe(
(data: Word[]): void => {
this.dataSource = new MatTableDataSource(data);
this.dataSource.paginator = this.paginator;
},
(error) => {
console.log(error);
}
);

getAll(): Observable<Word[]> {
return this.http.get<Word[]>(this.baseUrl);

HTML表格：

<app-add-word></app-add-word>
<div class="dictionary-table">
<table #table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
<td mat-cell *matCellDef="let element"> {{dataSource?.filteredData.indexOf(element) + 1}} </td>
</ng-container>
<!-- Polish Column -->
<ng-container matColumnDef="polish">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Polski </th>
<td mat-cell *matCellDef="let element"> {{element.polish}} </td>
</ng-container>
<!-- Spanish Column -->
<ng-container matColumnDef="spanish">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Hiszpański </th>
<td mat-cell *matCellDef="let element"> {{element.translated}} </td>
</ng-container>
<!-- Type Column -->
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Typ </th>
<td mat-cell *matCellDef="let element"> {{element.type}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

Answer 1

由于表针对性能进行了优化，因此它不会自动检查数据数组的更改。相反，当在数据数组上添加、删除或移动对象时，可以通过调用其renderRows((方法来触发对表的渲染行的更新。

// In your component
@ViewChild('table') myTable: MatTable<your type>;
.
.
.
// Call this inside wordService.create() success callback
this.myTable.renderRows();