ngFor список не печатать пустое значение - PullRequest
Новая
       6

ngFor список не печатать пустое значение

0 голосов
/ 10 мая 2018

Я получаю данные (для карты), которые я в дальнейшем заполняю в виде списка: 

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

, который выглядит следующим образом:

enter image description here

Я не хочу печатать элементы, которые имеют пустые значения, то есть в первом списке, если атрибут является пустой строкой "", или во втором списке, если действие является пустой строкой "". Сейчас эти значения также напечатаны в обоих списках.

Как это исправить? * ngЕсли я пытался, не имеет никакого эффекта.

1 Ответ

0 голосов
/ 10 мая 2018

Ваш *ngIf находится внутри вашего *ngFor в элементе <li>, что означает, что он все равно будет создавать элемент <li> для каждого item of card.responsibilities, а <div> внутри него не будет существовать, если item.action оценивается как ложное. Вместо этого поместите *ngIf на сам элемент <li> следующим образом: 

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

Таким образом, элемент <li> создается, только если item.action оценивается как true.

...