如何从 forkJoin 中保存值

How to persist value from forkJoin

我有一个场景,我必须获得 2 个 http 调用的结果,并将它们的组合结果数组传递给我正在实例化的 class。这是代码:

export class VideoListComponent implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  dataSource: VideoListDataSource;
  constructor( private http: HttpProxyService, private videoService: VideoService ) { }
  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['Video Name', 'Author', 'Category Name', 'Highest Quality Format', 'Release Date', 'Options'];

  ngOnInit() {
    let observables = [this.videoService.getInitialData('movie-authors'), this.videoService.getInitialData('movie-categories')];
    forkJoin(observables).subscribe(res => {
      this.dataSource = new VideoListDataSource(this.paginator, this.sort, res);
      console.log(this.dataSource);
    })
  }

}

现在在 console.log 上我可以根据需要看到 this.dataSource 中的值,但是在 html 模板上使用它时,它说 this.dataSource 未定义.

有什么帮助吗?我在这里遗漏了什么吗?

使用 HTML 标记进行编辑

<div class="mat-elevation-z8">
  <table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
    <!-- Id Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
      <td mat-cell *matCellDef="let row">{{row.id}}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row">{{row.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>

修改您的代码如下:

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

为什么我的代码不起作用:

You are trying to populate table data using datasource which not initialized. datasource gets value from service . Since the view is initialized before service gets called and that time dataSource is undefined, it is throwing the error.