时间戳

首页 > 解决方案 > 无法在angular7中查看html中的数据

angular - 无法在angular7中查看html中的数据

问题描述

我正在尝试从 Web 服务获取数据，为此我使用 Observable，我从 Web API 获得响应，但结果未显示在 html 上。

以下是我的services.ts

getForeports(searchText: string): Observable<FoReport[]> {
   return this.http.get(Constant.API_URL + 'getFoReports.php?searchText=' + encodeURIComponent(searchText))
   .pipe(map(result=>result['data']))
 }

以下是我的component.ts代码

import { FoReport } from '../../models/report';

reports: FoReport[] = [];

getDataUsingObservable() {
    this.reportservice.getForeports(this.filterText).subscribe(
        (response: any) => {
            this.reports = response.statistics;
            console.log(this.reports);
        });
}

以下是我的 API 响应

(2) [{…}, {…}]
0: {State: "Karnataka", SurveyorName: "Keval Kakdiya", NoOfInt: "2", SampleReceived: "2", CancelledEntries: "0", …}
1: {State: "MAHARASHTRA", SurveyorName: "Keval Kakdiya", NoOfInt: "0", SampleReceived: "0", CancelledEntries: "1", …}

以下是我的 HTML 代码

隐藏复制代码

<tr *ngFor="let report of reports">
    <td> {{report.name}}            </td>
    <td> {{report.formSubmited}}    </td>
    <td> {{report.formCancelld}}    </td>
    <td> {{report.formApproved}}    </td>
    <td> {{report.formDisApproved}} </td>
    <td> {{report.state}}</td>
    <td> </td>
</tr>

标签： angular

解决方案

请确保您正确读取数据。

<td> {{report.State}}</td>

因为你还没有发布整个对象。

推荐阅读