Mat Table Angular 只有最后一个数据是从数组中打印出来的，每一行中的每个字母也是如此

Question

table.component.ts

displayColumns: string[] = [ 'Feedback'] ;
listData: MatTableDataSource<any> ;
//listData;
myJSON ;
records: number;
objPutss: Post;
catupdated = false;
searchKey: string ;
@ViewChild(MatSort , {static: false}) sort: MatSort;
@ViewChild(MatPaginator , {static: false}) paginator: MatPaginator ;

tableLoad(event: any) {
this.fdbif = false;
  const selcetdCategoryCount = event.target.innerHTML;
this._responseService.getData().subscribe(data => {
  this.toolDataSet = data;
  for (let i = 0 ; i < this.toolDataSet.length ; i++) {
  // tslint:disable-next-line: triple-equals
  if (this.toolDataSet[i].Tool == this.selectedTool) {
      if(this.toolDataSet[i].Corrected_Category == selcetdCategoryCount){
      this.fdb[i]=this.toolDataSet[i].Feedback;
      this.listData = new MatTableDataSource(this.fdb[i]) ;
            this.listData.sort = this.sort;
  this.listData.paginator = this.paginator ;
      this.countt++;
      }
  }
  }

  console.log(this.countt);
              console.log(this.fdb);
         // this.listData = new MatTableDataSource(this.fdb) ;
   });
  }

table.component.html

<div *ngIf="countClicked">
        <mat-table [dataSource]= "listData" matSort >      
      <ng-container matColumnDef="Feedback">
            <mat-header-cell *matHeaderCellDef mat-sort-header ><span>Feedback </span></mat-header- 
      cell>
            <mat-cell *matCellDef="let element "  >
                {{element}}
            </mat-cell>
     </ng-container>

     <mat-header-row *matHeaderRowDef="displayColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayColumns"></mat-row> 
</mat-table>

<mat-paginator showFirstLastButtons
[pageSize]="10"></mat-paginator>

</div>

我能够在控制台日志中获取数据，即如果有五行数据，那五行我可以在 cosole 日志中看到，而在 mat-table 中只有第 5 行（最后）行被显示，一个单词的每个字母也显示在每一行中 enter image description here

console.log(countt) 给我准确的计数

谁能帮我解决这个问题

Answer 1

@Rajesh 我可以看到您正在遍历循环并创建新的数据源 this.listData = new MatTableDataSource(this.fdb[i]) ;...Mat table 以这样的方式工作，您只需将整个数组传递给table 对象，它将负责解析和构造值。

我的建议是，不要在 for 循环中创建 MatTableDataSource，创建您希望在 table 上打印的数组格式的数据，然后将数组传递给 mat table。

演示 link：Array to mat table

Mat Table Angular 只有最后一个数据是从数组中打印出来的，每一行中的每个字母也是如此

Mat Table Angular only last data is getting printed from array that too each letter in each row

angular

mat-table