如何修复 ngFor/ngIf else 在 angular 中不起作用

Question

这是代码：

<div *ngFor="let app of application$ | async;">
<div *ngIf="app.length > 0; else noResults">
<li>{{app.id}}</li>
</div>
<ng-template #noResults>
No Results
</ng-template>
</div>

TS

application$ = new BehaviorSubject([]);
constructor() { }
ngOnInit() {
const arr = new Array();
const data = [{
id: 'room1',
name: 'Room 1'
},{
id: 'room2',
name: 'Room 2'
},{
id: 'room3',
name: 'Room 3'
}];
this.application$.next(data);
}

如何在 ngFor 上修复 else，当没有数据时，它不会进入 noResults。 我也试过这个。

.HTML

<div *ngIf="application$ | async as app">
<div *ngIf="app.length !== 0; else noResults">
<div *ngFor="let data of app;let i = index;">
{{ data.name }}
</div>
</div>
<ng-template #noResults>
No Results
</ng-template>
</div>

同样的错误，当没有数据时，它不显示noReuslts

Answer 1

你的HTML应该看起来像这样

<div *ngFor="let app of application$ | async;">
<li>{{app.id}}</li>
</div>
<div *ngIf="(application$ | async).length === 0">No Results</div>

或

<div>
<li *ngFor="let app of application$ | async;">{{app.id}}</li>
<ng-container *ngIf="(application$ | async).length === 0">No Results</ng-container>
</div>