在 angular 中使用键值管道时如何跳过 ngFor 中的特定键值对

Question

我想在使用 ngFor 进行迭代时跳过项目对象中的 Date & Microsite 键和值。所以 ngIf 不起作用。

这是我的模板

<table *ngIf="!emptyQueries">
    <thead>
        <th>Date</th>
        <th>Microsite</th>
        <th><div class="w-50 d-inline-block" >Query</div><div class="w-50 d-inline-block">Answer</div></th>
    </thead>
    <tbody *ngFor="let item of queries">
      <td class="align-top">{{item?.Date}}</td>
      <td class="align-top">{{item?.Microsite}}</td>
      <td class="align-top">
          <table>
              <tbody>
                <tr *ngFor="let entry of item | keyvalue">
                  <td class="w-50 align-top pt-0" *ngIf="entry.key != 'Date' || entry.key !='Microsite'">{{entry.key}}</td>
                  <td class="w-50 align-top pt-0" *ngIf="entry.key != 'Date' || entry.key !='Microsite'">{{entry.value}}</td>
                </tr>
              </tbody>
          </table>
      </td>
    </tbody>
  </table>

这里是实际输出

知道如何解决这个问题吗？谢谢

Answer 1

将||替换为&&:

*ngIf="entry.key != 'Date' && entry.key !='Microsite'"

Answer 2

你可以在 typescript 中使用像这样的解构来完成它：

const {Date, Microsite, ...filtredItem} = item;

然后在模板中使用 filtredItem，而不使用 if

在 angular 中使用键值管道时如何跳过 ngFor 中的特定键值对

How to skip specific key value pairs in ngFor when using keyvalue pipe in angular

pipe

key-value

angular