找不到不同的支撑物体 angular 7

Question

您好，我正在使用 Angular 7

我创建了服务 user-report.service.ts 获取方法不在浏览器中打印

getReport() {
        /*this.http.get(`${this.apiUrl}/report`)
            .subscribe(res => console.log(res._body));*/
        return this
           .http
           .get(`${this.apiUrl}/report`);
    }

user-report.component.ts

getReport() {
        this.userReport.getReport()
            .subscribe((data: UserReport[]) => {
            this.reports = data;
            console.log(data);
    });
    }

模板

<table class="table table-hover">
  <thead>
  <tr>
      <td>User Name</td>
      <td>Created Date</td>
      <td>Updated Date</td>
      <td>Time</td>
      <td>Status</td>
  </tr>
  </thead>

  <tbody>
      <tr *ngFor="let report of reports">
          <td>{{ report.username }}</td>
          <td>{{ report.created_date }}</td>
          <td>{{ report.updated_date }}</td>
          <td>{{ report.time }}</td>
          <td>{{ report.status }}</td>

      </tr>
  </tbody>
</table>

但我遇到了这样的错误

错误错误：找不到不同的支持对象“响应状态：200 OK for URL:http://localhost:3000/report”类型为“object”。 NgFor 只支持绑定到数组等 Iterables。

不知道是什么问题

Answer 1

将单个报告转换为数组的简单修复：

getReport() {
        this.userReport.getReport()
            .subscribe((data: UserReport) => {
            this.reports = [data];
            console.log(data);
    });
    }