如何在 angular 中仅在 table 中显示匹配的列

Question

试图仅在 table 中显示匹配的列，但我不知道该怎么做。有知道的请帮忙解决。

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>

演示：https://stackblitz.com/edit/angular-71f59e?file=app%2Fapp.component.html

Answer 1

为什么不迭代 columnsOnly ？

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

Update，嗯，总的来说，它比我们的列数组更好，它是一个具有两个属性的对象数组，例如“标签”和“字段”。所以，假设你有一个像

这样的数组列

  columnsOnly = [
    {label:'First Name',field:'firstName'},
    {label:'Sur Name',field:'surname'}, 
    {label:'ID Type',field:'idType'},
    {label:'Near Place',field:'nearPlace'}
  ];

我们将循环更改为

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

更新 2 另一种方法是定义所有列并制作“地图”

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

(columnsAll 我们定义了“标签”和“字段”

如何在 angular 中仅在 table 中显示匹配的列

How to show matched column only in table in angular

javascript

typescript

angular

angular8