Angular Material mat-table 未显示来自数据源的更新数据 [英] Angular Material mat-table is not showing updated data from data source

问题描述

我的简单任务是将输入框中键入的文本添加到 mat-table，但它没有按预期工作.数据源只刷新了一次，没有显示从第二次开始的更新数据.

这是我的代码 app.component.html

 
<div class="input-area"><mat-form-field><input matInput placeholder="Type something" [(ngModel)]="currentText"></mat-form-field><button mat-raised-button color="primary" style="margin-left:10px;"(click)="onAdd($event)">添加</button>
<div class="result-area"><mat-table #table [dataSource]="dataSource" class="mat-elevation-z8"><ng-container matColumnDef="name"><mat-h​​eader-cell #th *matHeaderCellDef>名称</mat-h​​eader-cell><mat-cell #td *matCellDef="let element">{{element.name}} </mat-cell></ng-容器><mat-h​​eader-row #tr *matHeaderRowDef="displayedColumns"></mat-h​​eader-row><mat-row #tr *matRowDef="让行；列:displayColumns;"></mat-row></mat-table>

这是我的app.component.ts"，其中包含更新表数据源的Add"事件.

@Component({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {当前文本:字符串="；displayColumns = ['name'];数据:数据[] = [];数据源:数据[]；构造函数(){}onAdd($event){this.data.push({name: this.currentText});this.dataSource = this.data;}}接口数据{名称:字符串；}

我做错了什么?这是上述代码

的stackblitz示例

解决方案

对 dataSource 的引用保持不变，这样材料就不会知道您的源发生了变化.

试试

this.dataSource = [...this.data];

分叉的 Stackblitz

或者使用 BehaviorSubject 像:

dataSource = new BehaviorSubject([]);onAdd($event){this.data.push({name: this.currentText});控制台日志(this.data)；this.dataSource.next(this.data);}

分叉的 Stackblitz

My simple task is to add the text typed in an input box to the mat-table but it didn't work as expected. The datasource only refreshed one time and didn't show update data start from the second time.

Here is my code app.component.html

 <div class="main" fxLayout="column" fxGap="10">
   <div class="input-area">
     <mat-form-field>
        <input matInput placeholder="Type something" [(ngModel)]="currentText"> 
     </mat-form-field>
     <button mat-raised-button color="primary" style="margin-left:10px;" (click)="onAdd($event)">Add</button>
   </div>
   <div class="result-area">
      <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container matColumnDef="name">
         <mat-header-cell #th *matHeaderCellDef> Name </mat-header-cell>
         <mat-cell #td *matCellDef="let element"> {{element.name}} </mat-cell>
        </ng-container>
        <mat-header-row #tr *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row #tr *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>
   </div>

This is my "app.component.ts" which contains "Add" event that updates the table datasource.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  currentText: string= "";
  displayedColumns = ['name'];
  data: Data[] = [];
  dataSource: Data[];

  constructor(){}

  onAdd($event){
   this.data.push({name: this.currentText});
   this.dataSource = this.data;
  }
}

interface Data{
  name: string;
}

What did I do wrong? Here is the stackblitz example of the above code

解决方案

Reference to dataSource remains the same so that material doesn't know that your source changed.

Try

this.dataSource = [...this.data];

Forked Stackblitz

Or use BehaviorSubject like:

dataSource = new BehaviorSubject([]);

onAdd($event){
  this.data.push({name: this.currentText});
  console.log(this.data);
  this.dataSource.next(this.data);
}

Forked Stackblitz

这篇关于Angular Material mat-table 未显示来自数据源的更新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！