Угловой 5 * ngЕсли еще рендеринг div несмотря на nocontent

Question

Я использую

Угловой 5,2

Firestore

Используя *ngIf isContent else noContent, я пытаюсь сделать Observable только в том случае, если он заполнен данными. Логика не соответствует утверждению else. Это рендеринг isContent, даже когда нет данных. Я пролил эти подобные вопросы переполнения стека , и, похоже, мой синтаксис правильный. Что я делаю неправильно?

Вот код.

<ng-container *ngIf="months2025 | async as months; else nocontent">

  #### RENDERING REGARDLESS OF MONTHS2025 ####
  <div class="column">
    <h1>2025</h1> #### <-- THIS SHOWS UP ####
    <ul>
      <li *ngFor="let month of months">
        <a href={{month.url}}> {{ month.fileName }} </a>
      </li>
    </ul>
  </div>

</ng-container>

#### NOT RENDERING WHEN NOCONTENT ####
<ng-template #nocontent>
</ng-template>

Вот это component.ts

export class MinutesComponent {
  monthsArray2025: AngularFirestoreCollection<any>;
  months2025: Observable<any[]>;

  constructor(private afs: AngularFirestore) {
    this.monthsArray2025 = afs.collection<any>('minutes', ref => ref.where('year', '==', 2025);
    this.months2025 = this.monthsArray2025.valueChanges();
  }
}

Answer 1

Итак, Github проблема по этой теме.На данный момент самый простой обходной путь, который я нашел, - это пара контейнеров * ngIf.

<ng-container *ngIf="months2025 | async as months">
  <ng-container *ngIf="months.length > 0; else nocontent">
    <div class="column">
      <li *ngFor="let month of months">
        <a href={{month.url}}> {{ month.fileName }} </a>
      </li>
    </div>
  </ng-container>
</ng-container>

<ng-template #nocontent>
</ng-template>

Answer 2

Похоже, вы получаете пустой массив из вашей наблюдаемой, то есть [], что истинно .

Вам также необходимо проверить длину.

<ng-container *ngIf="(months2025 | async) as months && months.length>0; else nocontent">

Как я уже упоминал в моем комментарии, существует открытая проблема, позволяющая создать такую ​​конструкцию, в которой такая проверка возможна в angular .

Один из обходных путей - использовать карту для принудительной установки неопределенного / нулевого значения, когда у вас есть пустой массив.

 this.months2025 = this.monthsArray2025.valueChanges().pipe(map(mnths=>mnths && mnths.length>0?mnths:undefined));

Другой - использовать два разных *ngIf, как упомянуто @John * 1023.* здесь