Question

我正在使用

Angular 5.2

Firestore

使用*ngIf isContent else noContent，我试图仅当Observable中装有数据时才呈现它。逻辑没有触及else语句。即使没有数据，它也会渲染isContent。我已经遍历了这些similar stack overflow questions，看来我的语法是正确的。我究竟做错了什么？

这是代码。

<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

您似乎从可观察到的[]（即truthy）中得到了一个空数组。

您还需要检查长度。

~~<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));

另一种方法是使用@John here

提到的两个不同的*ngIf

Answer 2

因此，有一个关于该主题的Github issue。就目前而言，我发现的最简单的解决方法是一对* 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>

Angular 5 * ng如果没有内容则渲染div

2 个答案: