我的数据源有问题,因为我需要在表标题中显示 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;
}
}
预先感谢您的回复。
最佳答案
我认为你应该在初始化列表时设置一个空数组。
@Input() imageList: ImageModel[] = [];
关于angular - Angular MatTable 中没有数据源检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64122545/