为Angular 8中的嵌套对象创建数据源

我正在为一个项目尝试Angular，我一直在为我的MatTable创建数据源

我正在使用的API发送如下响应：

{
    data: [], //array of objects for samples
    total: 100, //total number of samples found
    pageSize: 10,
    pageIndex: 0
}

我的样本模型是：

//Model for a single sample
export class Sample {
    id: number;
    name: string;
}

//a plural namespace is used for multiple samples returned from API
export class Samples {
    samples: Sample[],
    total: number;
    pageSize: number;
    pageIndex: number;
}

// a const in case no samples were found
export const NO_SAMPLES {
    total: 0,
    pageIndex: 0,
    pageSize: 0,
    samples: []
}

现在，当我尝试将其与以下数据源集成时：

... //required imports
export class SamplesDataSource extends DataSource<Samples> {

private samplesSubject = new BehaviorSubject<Samples>(NO_SAMPLES);

public constructor(private samplesService: SamplesService) {
    super();
}

//this is where the error (described below) is showing
connect(collectionViewer: CollectionViewer): Observable<Samples> {
    return this.samplesSubject.asObservable();
}

disconnect(collectionViewer: CollectionViewer): void {
    this.samplesSubject.complete();
}

getSamples() {
    this.samplesService.getSamples().pipe(
        catchError(err => {
            return of([]);
        })
    ).subscribe(
        samples => this.samplesSubject.next(samples)
    );

}

}

App Component.html

<mat-table class="..." [dataSource]="samplesDataSource.samples">

    .... //rows and columns implementations

</mat-table>

<mat-paginator [length]="samplesDataSource.total" pageIndex="0" [pageSize]="samplesDataSource.pageSize" [pageSizeOptions]="samplesTablePageSizes" showFirstLastButtons></mat-paginator>

.... //行和列实现
这是因为
DataSource.connect（）
是一个可观察的对象，它发出一个数据数组。因此，SampleDataSource应该返回样本数组，如：

导出类SampleDataSource扩展了DataSource{
私有样本主体=新行为主体（无样本）；
连接（collectionViewer:collectionViewer）：可观察{
返回此.samplesSubject.asObservable（）.pipe(
映射（samples=>samples.samples）
);
}
...
}

官方的CDK表格示例，希望对您有所帮助。版本也可供选择

更新：
在您的案例中，不必使用
数据源
类，您可以使用样本数组作为数据源。我已经创造了这个世界

表格基本示例.ts

从'@angular/core'导入{Component，Injectable}；
从“rxjs”导入{BehaviorSubject，of}；
从“rxjs/operators”导入{switchMap，delay}；
从'@angular/material/paginator'导入{PageEvent}；
导出接口示例{
id：编号；
名称：字符串；
}
导出接口示例{
样本：样本[]；
总数：个；
页面大小：数字；
页面索引：编号；
}
常量元素_数据：样本[]=[
{id:1，名称：'Hydrogen'}，
{id:2，名称：'氦'}，
{id:3，名称：'锂'}，
{id:4，名称：'铍'}，
{id:5，名称：'硼'}，
{id:6，名称：'Carbon'}，
{id:7，名称：'氮'}，
{id:8，名称：'Oxygen'}，
{id:9，名称：'氟'}，
{id:10，名称：'Neon'}
];
@可注射（）
出口类样品服务{
getSamples（pageIndex:number，pageSize:number）：可观察{
const start=页面索引*页面大小；
const samples=ELEMENT_DATA.slice（开始，开始+页面大小）；
归还({
样本：样本，
pageIndex:pageIndex，
pageSize:pageSize，
总计：元素_DATA.length
}).烟斗(
延迟（500）
);
}
}
@组成部分({
选择器：“表基本示例”，
templateUrl:'table basic example.html'，
样式URL:['table-basic-example.css']，
提供者：[样本服务]
})
导出类TableBasicExample{
只读显示列：字符串[]=['id'，'name']；
只读页面$=新行为主体({
索引：0，
尺码：4
});
样本：样本={
总数：0，
页面索引：0，
页面大小：0，
样本：[]
};
建造师(
私有只读samplesService:samplesService
) {
此.page$.pipe(
开关映射（第=>{
返回此.samplesService.getSamples（page.index，page.size）；
})
).订阅（示例=>{
这个。样本=样本；
});
}
onPageChanged（事件：PageEvent）{
此.page$下一页({
索引：event.pageIndex，
大小：event.pageSize
});
}
}

表格基本示例.html


不
{{element.id}
名称
{{element.name}
这是因为
DataSource.connect（）
是一个可观察的对象，它发出一个数据数组。因此，SampleDataSource应该返回样本数组，如：

导出类SampleDataSource扩展了DataSource{
私有样本主体=新行为主体（无样本）；
连接（collectionViewer:collectionViewer）：可观察{
返回此.samplesSubject.asObservable（）.pipe(
映射（samples=>samples.samples）
);
}
...
}

官方的CDK表格示例，希望对您有所帮助。版本也可供选择

更新：
在您的案例中，不必使用
数据源
类，您可以使用样本数组作为数据源。我已经创造了这个世界

表格基本示例.ts

从'@angular/core'导入{Component，Injectable}；
从“rxjs”导入{BehaviorSubject，of}；
从“rxjs/operators”导入{switchMap，delay}；
从'@angular/material/paginator'导入{PageEvent}；
导出接口示例{
id：编号；
名称：字符串；
}
导出接口示例{
样本：样本[]；
总数：个；
页面大小：数字；
页面索引：编号；
}
常量元素_数据：样本[]=[
{id:1，名称：'Hydrogen'}，
{id:2，名称：'氦'}，
{id:3，名称：'锂'}，
{id:4，名称：'铍'}，
{id:5，名称：'硼'}，
{id:6，名称：'Carbon'}，
{id:7，名称：'氮'}，
{id:8，名称：'Oxygen'}，
{id:9，名称：'氟'}，
{id:10，名称：'Neon'}
];
@可注射（）
出口类样品服务{
getSamples（pageIndex:number，pageSize:number）：可观察{
const start=页面索引*页面大小；
const samples=ELEMENT_DATA.slice（开始，开始+页面大小）；
归还({
样本：样本，
pageIndex:pageIndex，
pageSize:pageSize，
总计：元素_DATA.length
}).烟斗(
延迟（500）
);
}
}
@组成部分({
选择器：“表基本示例”，
templateUrl:'table basic example.html'，
样式URL:['table-basic-example.css']，
提供者：[样本服务]
})
导出类TableBasicExample{
只读显示列：字符串[]=['id'，'name']；
只读页面$=新行为主体({
索引：0，
尺码：4
});
样本：样本={
总数：0，
页面索引：0，
页面大小：0，
样本：[]
};
建造师(
私有只读samplesService:samplesService
) {
此.page$.pipe(
开关映射（第=>{
返回此.samplesService.getSamples（page.index，page.size）；
})
).订阅（示例=>{
这个。样本=样本；
});
}
onPageChanged（事件：PageEvent）{
此.page$下一页({
索引：event.pageIndex，
大小：event.pageSize
});
}
}

表格基本示例.html


不
{{元素
<mat-table class="..." [dataSource]="samplesDataSource.samples">

    .... //rows and columns implementations

</mat-table>

<mat-paginator [length]="samplesDataSource.total" pageIndex="0" [pageSize]="samplesDataSource.pageSize" [pageSizeOptions]="samplesTablePageSizes" showFirstLastButtons></mat-paginator>