Блог

Главная - Вопросы по программированию - Угловой: ничего не отображать, если *ngIf не удается

Угловой: ничего не отображать, если *ngIf не удается

#angular #typescript

Вопрос:

У меня есть два массива fetchedData и cardCheckArray . Я использую вложенный цикл и отображаю данные fetchedData , если какой-то определенный элемент в fetchedData равен cardCheckArray . Это своего рода отображение элементов массива, но с использованием двух разных массивов. У меня тут возникла проблема. В случае, если элемент первого массива не совпадает со вторым массивом, Угловой ничего не печатает, но все равно занимает пустую строку для каждой итерации, когда условие не выполняется. Это занимает много места под заголовком каждой карточки. Я хочу как-то не печатать пустые пробелы в случае *ngIf сбоя. Я пробовал использовать ng-template , но все равно получаю ту же проблему.

Вот мой код:

HTML

 <div *ngIf = "containsData">
    <div class="card-body">
      <div style = "width: 70%; margin: auto;" *ngFor = "let data of cardCheckArray; let i = index">
        <div class="card-header">
          <p>{{data}}</p>
        </div>
        <div class="card-body" *ngFor = "let data2 of fetchedData">
          <div *ngIf = "data2.PROCESS_NAME == data; else printNothing">
            <p>{{data2.DOCUMENT_NAME}}</p>
            <p>{{data2.DATE_SUBMITTED | date: 'medium'}}</p>
            <p>{{data2.PROCESS_NAME}}</p>
          </div>
          <ng-template #printNothing>
            <p>empty</p>        //I am printing empty right now but it prints whitespaces if I leave it blank here
          </ng-template>
        </div>
      </div>

      <hr>
    </div>
  </div>

машинописный текст

 var swap = this.fetchedData[0].PROCESS_NAME;

      for (var x in this.fetchedData)
      {
        if(swap == this.fetchedData[x].PROCESS_NAME)
        {
          continue;
        }
        else
        {
          this.cardCheckArray.push(swap);
          swap = this.fetchedData[x].PROCESS_NAME;
        }
      }
this.cardCheckArray.push(swap);

Как я могу это решить? Любая помощь будет признательна. Спасибо!

Ответ №1:

Angular по-прежнему отображает div элемент с ngFor директивой. Поскольку вы не можете поместить две структурные директивы ( ngFor и ngIf ) на один и тот же элемент, вы должны использовать ng-container . Это элемент, в котором вы можете разместить структурную директиву ( ngFor в вашем случае), но которая не будет отображаться в html. Внутри что положил div с card-body классом и положил ngIf на него.

Ответ №2:

Используйте ng-контейнер для *ngFor и не используйте else и ng-template .

 <ng-container "let data2 of fetchedData" >
  amp;<div class="card-body" *ngIf = "data2.PROCESS_NAME == data; else printNothing">
     …
Метки: ,