Angular Material Table 不会显示 Observable<{ [key: string]: number; }>

Question

我的 REST API returns 一个 Observable<{ [key: string]: number; }>。这是一个返回 Map<String, Integer> 并使用来自 Swagger 的 @ApiOperation(value = "Lorem ipsum", response = Integer.class, responseContainer = "Map") 注释的 JAX-RS Web 服务，它生成我的 Angular 客户端。

我的 mat-table 定义如下所示：

HTML:

<mat-table [dataSource]="myDataSource">
    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>

    <mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></mat-row>

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

    <ng-container matColumnDef="value">
        <mat-header-cell *matHeaderCellDef>Value</mat-header-cell>
        <mat-cell *matCellDef="let property">{{property.value}}</mat-cell>
    </ng-container>
</mat-table>

组件：

export class DataComponent implements OnInit {

    columnsToDisplay = ['name', 'value'];

    myDataSource: Observable<{ [key: string]: number; }>;

    constructor(private webClient: WebClientService) {
    }

    ngOnInit() {
        this.myDataSource = this.webClient.getData();
    }

}

Angular 不显示任何内容，也不使用此代码输出警告。在我的浏览器网络请求监视器中，我可以看到 { "thing1": 1, "thing2": 2 } 之类的数据到达客户端。一个简单的 this.myDataSource.subscribe(x => console.log(x)) 在浏览器的控制台中显示相同的数据。我该怎么做才能在 Table 中显示此数据？

编辑： 为了更清楚一些，这里有更多代码：

HTTP GET 方法：

public getData(observe?: 'body', reportProgress?: boolean): Observable<{ [key: string]: number; }>;
public getData(observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<{ [key: string]: number; }>>;
public getData(observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<{ [key: string]: number; }>>;
public getData(observe: any = 'body', reportProgress: boolean = false ): Observable<any> {

    let headers = this.defaultHeaders;

    // to determine the Accept header
    let httpHeaderAccepts: string[] = [
    ];
    let httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
    if (httpHeaderAcceptSelected != undefined) {
        headers = headers.set("Accept", httpHeaderAcceptSelected);
    }

    // to determine the Content-Type header
    let consumes: string[] = [
    ];

    return this.httpClient.get<{ [key: string]: number; }>(`${this.basePath}/lorem/ipsum`,
        {
            withCredentials: this.configuration.withCredentials,
            headers: headers,
            observe: observe,
            reportProgress: reportProgress
        }
    );
}

数据以上述格式接收，但不会显示在 mat-table 中。将 ngOnInit 更改为 ngAfterViewInit 会产生错误 Error: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'dataSource: undefined'. Current value: 'dataSource: [object Object]'."。通过 subscribe() 直接分配接收到的数据会产生错误 Provided data source did not match an array, Observable, or DataSource.

Answer 1

您应该使用 ngAfterViewInit 而不是 ngOnInit。在添加数据之前，您需要 table 进行渲染。

Angular Material Table 不会显示 Observable<{ [key: string]: number; }>

Angular Material Table won't display Observable<{ [key: string]: number; }>

jax-rs

angular-material

angular

jakarta-ee

HTML:

组件：