Question

我目前正在使用“简单”异步DataSource接口成功显示材料<mat-table>。我使用async'DataSource'扩展对象提供了伪代码，该扩展对象在下面工作（最终调用http调用，如果你感兴趣的话）。但是，我在使用至少有2个（TWO）内部 ARRAYS 的界面时遇到困难（参见下面的IHuhInterface），每个界面都有自己的<mat-table>。如何管理数据源并显示指向具有至少两个内部数组的接口的mat-table？

... simple.interface.ts：

interface ISimple {
    name: string;
    address: string;
}

和simple.component.ts是： ...

datasource = new SimpleDataSource（this.simpleService）;

其中...

export class SimpleDataSource extends DataSource<any> {
    constructor(private simpleService: SimpleService) {
        super();
    }
    connect(): Observable<SimpleArray[]> {

        return this.simpleService.simpleList()
            .map( (simpleItems) => {
                return simpleItems;  // simple items returns by service
            },
            (error) => {
                alert('returned error placeholder');
                return error;
            })
            .catch( (exception) => {
                alert('serious exception placeholder');
                return of(exception);
            });
    }
    disconnect() {}
}

和部分ISimpleInterface模板是：

<mat-table #table [dataSource]="ds">

    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let simpleItemElement"> {{simpleItemElement.name}} </mat-cell>
    </ng-container>

    <!-- address Column -->
    <ng-container matColumnDef="address">
        <mat-header-cell *matHeaderCellDef> Address </mat-header-cell>
        <mat-cell *matCellDef="let simpleItemElement"> {{simpleItemElement.address}} </mat-cell>
    </ng-container>
....

以上作品。 如何使用具有TWO内部数组的接口执行上述操作，每个数组都有自己的<mat-table>？像这样：

huh.interface.ts：....

interface IHuhInterface {
    table1Array:SomeArray1[];  // show in <mat-table> 1
    table2Array:SomeArray2[]   // show in <mat-table> 2
}

如何在模板中使用两个数组，这两个数据表必须填充这两个数组？我需要两个数据源......？要么 ..？请注意，这两个数组来自一个http调用，因此我不想进行两次调用。

非常感谢！

PS：版本是：

"@angular/animations": "^5.1.3",
"@angular/cdk": "^5.0.3",
"@angular/common": "^5.1.2",
"@angular/compiler": "^5.1.2",
"@angular/core": "^5.1.2",
"@angular/forms": "^5.1.2",
"@angular/http": "^5.1.2",
"@angular/material": "^5.0.3",

Answer 1

所以终于找到了一个干净的解决方案，其中包含一些没有很好记录的细微差别：

dataSourceArray1 =  new MatTableDataSource(); <===**NUANCE**. should be clearly mandated.
dataSourceArray2 =  new MatTableDataSource(); <===**NUANCE**. should be clearly mandated.

ngOnInit() {
    this.service.getTwoArrays()
    .map( (twoArrays) => {
        this.dataSourceArray1.data = twoArrays.array1; <==NUANCE. 'data' update triggers change.
        this.dataSourceArray2.data = twoArrays.array2; <==NUANCE. 'data' update triggers change.
        return twoArrays;
    })
    .subscribe( (arrays) => {
        // do nothing.
    } );
}

Answer 2

就个人而言，我在数据源之外进行了服务调用，当它返回时，只需通过公开返回的流，通过某种方法（如updateData(data)）为每个数据源提供正确的数据在connect函数中，只需手动推送新数组。

具有多个内部ARRAY属性

2 个答案: