Angular 角材料表赢得'；t显示可观察<；{[key:string]：number；}>；

我的RESTAPI返回一个

可观察的

。 它是一个JAX-RS web服务，返回一个

Map

，并用Swagger的

@ApiOperation（value=“Lorem ipsum”，response=Integer.class，responseContainer=“Map”）

注释，它生成了我的Angular客户端

我的

mat表

定义如下：

HTML: 数据以上述形式接收，但不会显示在

mat表中

。将

ngOnInit

更改为

ngAfterViewInit

会产生错误

错误：“ExpressionChangedTerithasBeenCheckedError:表达式在检查后已更改。以前的值：“数据源：未定义”。当前值：“数据源：[对象]”

。

---

如果数据源与数组、可观察数据源或数据源不匹配，则通过subscribe（）直接分配接收到的数据会产生错误

您应该使用ngAfterViewInit而不是ngOnInit。您需要在添加数据之前呈现该表。
现在我在浏览器控制台中遇到一个错误：
错误：“ExpressionChangedTerithasBeenCheckedError:表达式在检查后已更改。以前的值：'dataSource:undefined'。当前值：'dataSource:[对象]。”
否则，当我省略myDataSource的类型声明并直接在
subscribe（）
方法中分配值时，我得到了一个错误“如果数据源与数组、可观察数据源或数据源不匹配”，问题是什么？你现在看到了什么？什么是
webClient.getData（）
？那会有什么回报？您需要向我们提供更多信息。我们对这个问题没有足够的了解。无论您认为有什么帮助，请将其添加到您的帖子中。我对帖子进行了编辑。您确定要将
可观察的
传递到
[dataSource]
？错误消息指出我可以传递可观察的。不幸的是，它没有提到可观察的内容。我只是在看，我认为数据需要是一个数组。它可以是一个阵列，也可以是发射阵列的可见光。你正试图给它一个对象。您需要映射到一个数组。
<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();
    }

}

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