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

Question

我正在使用Angular 5，因为我正在创建自定义表组件，所以我从基础开始。但是我不知道我的代码出了什么问题以及为什么我的数据填充不了我的数据呢？这是我的代码

app.component.html

head(mtcars)$hp < 100
# [1] FALSE FALSE  TRUE FALSE FALSE FALSE
cumany(head(mtcars)$hp < 100)
# [1] FALSE FALSE  TRUE  TRUE  TRUE  TRUE

app.component.ts

<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>

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

请让我知道我做错了什么以及如何使用export class AppComponent implements OnInit { columns:string[]; posts: students[]; getFilteredData: students[]; rows: number = 0; ngOnInit(): void { this.columns = ['UserId','ID','Title','Body']; } constructor() { this.posts = [ { userId: 1, id: 1, title: 'Ahmer', body: 'Loreum ispum dore.' }, { userId: 2, id: 2, title: 'Ahmer', body: 'Loreum ispum dore.' }, { userId: 3, id: 3, title: 'Ahmer', body: 'Loreum ispum dore.' }, { userId: 4, id: 4, title: 'Ahmer', body: 'Loreum ispum dore.' }, { userId: 5, id: 5, title: 'Ahmer', body: 'Loreum ispum dore.' }, { userId: 6, id: 6, title: 'Ahmer', body: 'Loreum ispum dore.' }, { userId: 7, id: 7, title: 'Ahmer', body: 'Loreum ispum dore.' }, { userId: 8, id: 8, title: 'Ahmer', body: 'Loreum ispum dore.' } ]; this.getFilteredData = this.posts; } title = 'app'; onSearching(searchValue: string) { console.log(this.posts) this.getFilteredData = this.posts.filter( d => d.body.includes(searchValue.toLowerCase())); this.rows = this.getFilteredData.length; } } class students { userId: number; id: number; title: string; body: string; } 以角度在数据表中填充数据？

Answer 1

这就是我为了让它发挥作用所做的。

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

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>

之后我得到一张8行4列的表格;显示的所有数据。