Angular6动态数据表

Question

我有一个组件，用于将表单数据（使用表单控件）发布到返回json响应的服务。现在，我有一个不同的数据表组件，负责将获取的数据正确显示到表中。到目前为止，我已经能够将硬编码数据显示到数据表中。但是我无法将数据源属性链接到从服务返回的数据。我该怎么做？

对于引荐，我已经在这里实现了“ https://www.youtube.com/watch?v=ao-nY-9biWs”……我到处都进行了搜索，但没有找到解决方案。谢谢。

<div class="mat-elevation-z8 data-table">
    <table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">

      <!-- state_name Column -->
      <ng-container matColumnDef="state_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>state_name</th>
        <td mat-cell *matCellDef="let row">{{row.state_name}}</td>
      </ng-container>


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

    <mat-paginator #paginator
        [length]="dataSource.data.length"
        [pageIndex]="0"
        [pageSize]="50"
        [pageSizeOptions]="[25, 50, 100, 250]">
    </mat-paginator>
  </div>

//for simplicity i am showing just a single field here
challanDataFilterForm = new FormGroup({
    state_name : new FormControl(),


  });


getRecords(event){
  event.preventDefault();
  const target = event.target;

// VALUES SUBMITTED USING FORM-GROUP
 const stateName= this.challanDataFilterForm.get('state_name').value;

 this.Auth.getAuthRecords(stateName )
 .subscribe(
   data =>

 console.log("fetched data :",data),
 );
  this.router.navigate(['/challanFilterSearch/data']);

 }

服务响应后，我希望将数据显示在单独的组件（数据表）中，并使用标签将其显示给另一个组件。