表格垫表格列表中的表格数据未呈现

如何解决表格垫表格列表中的表格数据未呈现

我制作了公共组件，以便仅通过传递列和表数据就可以使用它。 在subcribe（）外部时可以正常工作，但在subscribe（）内部时则不能正常工作

common-table.component.ts

@Input() public tableData:any[];
  @Input() public displayedColumns:any[];
  @Input() public heading:any;
  dataSource: MatTableDataSource<any>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(
    private router: Router
  ) {
  }

  ngOnInit(): void {
      // Assign the data to the data source for the table to render
      this.dataSource = new MatTableDataSource(this.tableData);
  }
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

common-table.component.html

 <mat-form-field>
            <mat-label>Filter</mat-label>
            <input matInput (keyup)="applyFilter($event)" placeholder="Type To Search" #input>
        </mat-form-field>    
<table mat-table [dataSource]="tableData" matSort>
  
  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> S.No. </th>
    <td mat-cell *matCellDef="let row"> {{row.id}} </td>
  </ng-container>
  
  <!-- nutrients Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Ingredients </th>
    <td mat-cell *matCellDef="let row">
      <a class="">
      {{row.name}}
    </a>
  </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  
  <!-- Row shown when there is no matching data. -->
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
  </tr>
</table>
  
<mat-paginator [pageSizeOptions]="[10,25,100]"></mat-paginator>

other.component.ts

当我直接将数据分配给tableData时，它的工作正常。 但是从服务呼叫时无法正常工作

public tableData：any = [ { id：1208， 名称：“ Namen Abc”， }， { id：493， 名称：'Abelmoschus esculentus' }]

this._adminService.getNutrientList().subscribe(
      (res) => {
        this.tableData=SbmConstants.tableData
        if(res.data){
          this.tableData=res.data
        }
      },(error) => {}
    );

在订阅中使用tableData时，这不会在表列表中呈现