не в состоянии просматривать данные в формате HTML в Angular7

Question

Я пытаюсь получить данные из веб-службы, для этого я использую Observable, я получаю ответ от веб-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>

Answer 1

Пожалуйста, убедитесь, что вы правильно прочитали данные.

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

Поскольку вы не разместили весь объект.

Answer 2

Я вижу, что ваши ключи ответа не совпадают с теми, которые вы использовали в своем шаблоне. Например, у вас есть State в вашем ответе, где вы используете state

Чтобы проверить, есть ли у вас ответ, необходимый в шаблоне, попробуйте добавить его в шаблон как

{{ reports | json }}

и перепроверьте свойства, которые вы используете в своем шаблоне.