角度材质表不会显示observate<{[key:string]:number;}>

Observable<{ [key: string]: number; }> . Map<String, Integer> 并用注释 @ApiOperation(value = "Lorem ipsum", response = Integer.class, responseContainer = "Map") 从招摇过市,这产生了我的角度客户。

我的 mat-table 定义如下:

<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)) 在浏览器的控制台中显示相同的数据。如何在表中显示此数据?

编辑: 为了澄清问题,这里有更多的代码:

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
        }
    );
}

数据以上述形式接收,但不会显示在 垫子桌 . 改变 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 .