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

#angular #angular-ng-if

Вопрос:

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

Блок ngIf с помощью ngFor

 <ng-container *ngFor="let expense of expenses">
     <div *ngIf="sortBy amp;amp; sortByColor amp;amp; sortCategory.color == expense.category.color || sortBy amp;amp; sortByTitle amp;amp; 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 , вместо этого прямо сейчас он отображает else при каждом запуске ngFor .

1. Вы пытались переместить <ng-template> за пределы ngFor ?

2. Я только что сделал, и он по-прежнему дает те же результаты. Он отображается для каждой скрытой карты, а не отображается только тогда, когда весь DIV пуст (значения ngIf не являются истинными)

3. хорошо, попробуйте это: с ng-template внутри ngFor, а затем снаружи и посмотрите *ngIf="(sortBy amp;amp; sortByColor amp;amp; sortCategory.color == expense.category.color) || (sortBy amp;amp; sortByTitle amp;amp; sortCategory.title == expense.category.title) || !sortBy; else elseBlock

4. Интересно, что если ng-template он находится внутри ngFor , он никогда не появляется, однако, если вы поместите его снаружи ngFor , он появится для каждой карты, которая не отображается.

5. это потому, что блок else запускается внутри ngFor, и пока выполняется цикл, он будет продолжать отображать этот блок else при выполнении условия

Ответ №1:

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

 isSortedExpense = (expense) => {
  return !this.sortBy ||
    this.sortByColor amp;amp; this.sortCategory.color == expense.category.color || 
    this.sortByTitle amp;amp; 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>

1. Это делает свое дело. Тем не менее, по какой-то причине я получаю шесть из этих ошибок в моей консоли. ERROR TypeError: Cannot read property 'some' of undefined

2. Я добавил оператор безопасной навигации ?. expenses?.some(...) для учета случаев, когда expenses он еще не определен.