Отображать блок else, только если ВСЕ параметры в * ngIf не соответствуют действительности - PullRequest
Новая
       17

Отображать блок else, только если ВСЕ параметры в * ngIf не соответствуют действительности

1 голос
/ 22 апреля 2019

У меня есть несколько опций в *ngIf, разделенных оператором ||.У меня также есть оператор настройки else, чтобы показать, если ничего не верно.Проблема в том, что он отображает блок else в каждой операции, а не в целом.

Блок NgIf с ngFor 

<ng-container *ngFor="let expense of expenses">
     <div *ngIf="sortBy && sortByColor && sortCategory.color == expense.category.color || sortBy && sortByTitle && sortCategory.title == expense.category.title || !sortBy; else elseBlock>
         ....
     </div>
     <ng-template #elseBlock>
         <p>This is the else block that should show up only when nothing is displayed above.</p>
     </ng-template>
</ng-container>

Я только хочу, чтобы блок else отображался, еслив ngFor вообще ничего не отображается на основе параметров, указанных в ngIf, вместо этого прямо сейчас он отображает остальное при каждом запуске ngFor.

1 Ответ

3 голосов
/ 22 апреля 2019

Чтобы отображался только один elseBlock, вы должны поместить его вне цикла ngFor во внешнем состоянии ngIf. Если вы поместите условие в метод компонента, определенного как функция стрелки: 

isSortedExpense = (expense) => {
  return !this.sortBy ||
    this.sortByColor && this.sortCategory.color == expense.category.color || 
    this.sortByTitle && this.sortCategory.title == expense.category.title;
}

Вы можете назвать это во внешнем ngIf и во внутреннем ngIf. Наличие хотя бы одного отображаемого элемента можно проверить с помощью Array.some () : 

<ng-container *ngIf="expenses?.some(isSortedExpense); else elseBlock"> 
  <ng-container *ngFor="let expense of expenses">
     <div *ngIf="isSortedExpense(expense)">
       ....
     </div>
  </ng-container>
</ng-container>
<ng-template #elseBlock>
  <p>This is the else block that should show up only when nothing is displayed above.</p>
</ng-template>
...