Angular ngFor列表不打印空值

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

[{"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>

属性


{{item.attribute}}


行动


{{item.action}

如下所示：

   <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没有效果。

您的

*ngIf

在

元素上的
内，这意味着它仍然会为卡的每个
项创建
元素。职责
，如果
项，则
内的
将不存在。操作
的计算结果为false。相反，将
*ngIf
放在
元素本身上，如下所示：

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



{{item.action}



这样，一个
元素只有在
元素上的
项目中才会创建。动作
的计算结果为
真
您的
*ngIf
在
元素中，这意味着它仍然会为卡的每个
项目创建一个
元素。职责，如果
item.action
的计算结果为false，则其内部的
将不存在。相反，将
*ngIf
放在
元素本身上，如下所示：

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



{{item.action}



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