angular - Angular MatTable 中没有数据源检测

Question

我的数据源有问题，因为我需要在表标题中显示 selectAll 复选框。

当我尝试 console.log 数据源时，它返回一个空数组，并且 dataSource.data-length 返回零。

我需要一个输入，因为该组件是另一个组件的子组件

<image-list [imageList]="imageList"></image-list>

我尝试将其放入ngOnit中，但不起作用

import { Component, OnInit, Inject, OnDestroy, Input } from "@angular/core";
import { ImageModel } from "../image.model";
import { MatTableDataSource } from '@angular/material';

export class ImageListComponent implements OnInit, OnDestroy {
  
  @Input() imageList: ImageModel[];
  selection = new SelectionModel(true, [], true);
  selectionModelChanged = new BehaviorSubject([]);
  dataSource = new MatTableDataSource();
  row: any;
  

  constructor(private builderService: BuilderService,
    @Inject(DOCUMENT) private document: any) {
    this._unsubscribeAll = new Subject();
    // this.dataSource = new MatTableDataSource(this.imageList); //it won't work here
  }

  ngOnDestroy() {
    this.imageListChange.unsubscribe();
    clearInterval(this.callLoop);
  }

  ngOnInit() {
    this.getImageList();
    this.dataSource = new MatTableDataSource(this.imageList);
    console.log(this.dataSource.data) // returns []
    this.imageListChange = this.builderService.imageRemoved$.subscribe(() => {
      this.getImageList();
    });

        
    
  }

  private getImageList() {
    this.builderService.getFinishedImagesList().then(response => {
      this.imageErrorMessage = null;
      this.imageList = response;
      console.log(response)
    }).catch(() => {
      this.imageErrorMessage = "Oops, there was an error getting the builds list.";
    });
  }

  markAsSelected(device: any): void {
    this.selection.isSelected(device);
}


/** Whether the number of selected elements matches the total number of rows. */
isAllSelected(): boolean {
  let numSelected = null;
  let numRows = null;
      numSelected = this.selectedImages.length;
      numRows = this.dataSource.data.length; //always zero so, select All won't work
  return numSelected === numRows; 
}
 
}

预先感谢您的回复。

Answer 1

我认为你应该在初始化列表时设置一个空数组。

@Input() imageList: ImageModel[] = [];