Javascript 如何仅在表中以角度显示匹配的列

尝试仅在表中显示匹配的列，但我不知道如何执行此操作。如果有人知道，请帮助找到解决方案

app.component.ts：

 columnsOnly = ['name', 'id', 'rank']; 
  items = [
    { name: 'jean', surname: 'kruger', id: 1, place: 'ckh', rank: null },
    { name: 'bobby2', surname: 'marais2', id: 2, place: 'ckh', rank: null },
    { name: 'jean3', surname: 'kruger3', id: 3, place: 'ckh', rank: null },
    { name: 'bobby4', surname: 'marais4', id: 4, place: 'ckh', rank: null },
    { name: 'jean5', surname: 'kruger5', id: 5, place: 'ckh', rank: null },
    { name: 'bobby6', surname: 'marais6', id: 6, place: 'ckh', rank: null }
  ];

app.component.html：

 <table>
  <thead>
    <tr>
      <th *ngFor="let head of items[0] | keys: index as i">

        <span *ngIf="head == columnsOnly[i]">
        {{head}} </span>

      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items">
      <td *ngFor="let list of item | keys">{{item[list]}}</td>
    </tr>
  </tbody>
</table>

{{head}}
{{item[list]}

---

演示：

为什么不只迭代列

<tr>
  <th *ngFor="let column of columnsOnly">
    <span>{{column}} </span>
  </th>
</tr>

<tr *ngFor="let item of items">
  <td *ngFor="let column of columnsOnly">{{item[column]}}</td>
</tr>

我们将循环更改为

  <th *ngFor="let column of columnsOnly">
    <!--see that you use column.label-->
    <span>{{column.label}} </span>
  </th>

  <tr *ngFor="let item of items">
    <!--see that you use column.field-->
     <td *ngFor="let column of columnsOnly">{{item[column.field]}}</td>
  </tr>

---

（columnsAll我们定义了“label”和“field”

有时会得到空值-{item[column]}如果column的值是对象属性的名称，并且有值，则应该是有效的。例如，“rank”为空，因此不显示任何值-。小心，Angular是区分大小写的-它的“rank”与“rank”不同-请检查：在这种情况下，我们如何匹配它？假设数组属性名camelcase？我更新了答案。想法是列是一个具有两个属性的对象数组：

标签

-您在表的标题中看到的标签，以及

字段

列的真实名称。好的，您还可以拥有一个st的数组环并想象一种解析数组以获取列的标题或名称的方法，但实际上我认为使用对象数组的方法更“健壮”

  <th *ngFor="let column of columnsOnly">
    <!--see that you use column.label-->
    <span>{{column.label}} </span>
  </th>

  <tr *ngFor="let item of items">
    <!--see that you use column.field-->
     <td *ngFor="let column of columnsOnly">{{item[column.field]}}</td>
  </tr>

columns=['First Name','ID Type']
columnsOnly=this.columns
                 .map(x=>this.columnsAll.find(c=>c.label==x))