ngFor 列表不打印空值

Question

我收到数据（用于卡），我将其进一步填充为列表：

[{"id":20,"responsibilities":[{"id":39,"attribute":"Name","action":"","card":20},{"id":40,"attribute":"ISBN","action":"","card":20},{"id":41,"attribute":"Genre","action":"","card":20},{"id":42,"attribute":"","action":"Purchase","card":20}],"collaborators":[],"thing":"Book"}]

我正在填充以下两个列表：

   <h6>Attributes</h6>
   <ul>
     <li *ngFor="let item of card.responsibilities">
      <div *ngIf="item.attribute">{{item.attribute}}</div>
    </li>
   </ul>
   <h6>Actions</h6>
   <ul>
     <li *ngFor="let item of card.responsibilities">
       <div *ngIf="item.action">{{item.action}}</div>
     </li>
   </ul>
 </ion-col>

如下所示：

我不想打印具有空值的项目，即在第一个列表中如果属性为空字符串“”，或者在第二个列表中如果操作为空字符串“”。现在这些值也打印在两个列表中。

如何解决这个问题？ *ngIf 我试过没有效果。

Answer 1

您的 *ngIf 在 *ngFor 内的 <li> 元素上，这意味着它仍然会为每个 item of card.responsibilities 创建一个 <li> 元素，并且如果 item.action 的计算结果为假，则其中的 <div> 将不存在。相反，将 *ngIf 放在 <li> 元素本身上，如下所示：

<ul>
  <span *ngFor="let item of card.responsibilities">
    <li *ngIf="item.action">
      {{item.action}}
    </li>
  </span>
</ul>

这样，只有当 item.action 的计算结果为 true 时才会创建 <li> 元素。

ngFor 列表不打印空值

ngFor list do not print empty value

ionic-framework

ionic2

ionic3

angular