为什么我的数据表没有在angular中使用*ngFor填充？

我使用Angular 5，在制作自定义表格组件时，我从基础开始。但是我不知道我的代码出了什么问题，为什么我没有用我的数据填充我的数据表？这是我的密码

app.component.html

<input #searchbox placeholder="Search Something" (input)="onSearching($event.target.value)">
<br>
<h1>Results</h1>
<br>
<table width="100%" style="border: 2px solid black;">
  <tr *ngFor="let xyz of getFilteredData">
    <td *ngFor="let col of columns; let i=index;">
      {{ xyz[i] }}
    </td>
  </tr>
</table>
<div>
  {{rows}}
</div>

这是我加载应用程序时的输出

---

请让我知道我做错了什么，以及我是如何在angular中使用

*ngFor

在datatable中填充数据的？

这就是我为了使其正常工作所做的

更改列名的大小写以匹配数据中字段的大小写

this.columns = ['userId', 'id', 'title', 'body'];

然后，我将模板更改为使用

col

变量，而不是您正在使用的索引（

I

）

<table width="100%" style="border: 2px solid black;">
  <tr *ngFor="let xyz of getFilteredData">
    <td *ngFor="let col of columns">
      {{ xyz[col] }}
    </td>
  </tr>
</table>

{{xyz[col]}

---

之后我得到了一个8行4列的表；所有的数据都显示出来。

这是我为了让它工作而做的

更改列名的大小写以匹配数据中字段的大小写

this.columns = ['userId', 'id', 'title', 'body'];

然后，我将模板更改为使用

col

变量，而不是您正在使用的索引（

I

）

<table width="100%" style="border: 2px solid black;">
  <tr *ngFor="let xyz of getFilteredData">
    <td *ngFor="let col of columns">
      {{ xyz[col] }}
    </td>
  </tr>
</table>

{{xyz[col]}

---

之后我得到了一个8行4列的表；显示的所有数据。

JavaScript区分大小写。所以，

UserId

！=<代码>用户ID。更改列列表字符串中的大小写以匹配数据属性名称的大小写，这可能会起作用。JavaScript区分大小写。所以，

UserId

！=<代码>用户ID。更改列列表字符串中的大小写以匹配数据属性名称的大小写，这可能会起作用。谢谢你宝贵的时间。太好了。谢谢你宝贵的时间。