[英]async ngIf / Angular is not working as expected
I have a code as shown below. 我有如下所示的代码。 The problem here is
async
ngIf
is not working. 这里的问题是
async
ngIf
无法正常工作。 ie *ngIf="budgetGroups$ | async; let bg;else loading"
. 即
*ngIf="budgetGroups$ | async; let bg;else loading"
。 I have a data for the observable budgetGroups$
. 我有一个可观察的
budgetGroups$
的数据。 When I removed the ngIf
then it shows a list of data nicely. 当我删除
ngIf
它很好地显示了数据列表。 Can you tell me where is the issue? 你能告诉我问题在哪里吗? No errors are shown too.
也没有显示错误。
Note: If you know any other way to do this please share it with me. 注意:如果您知道其他方法,请与我分享。
.html html的
<ion-list radio-group [(ngModel)]="budgetGroup" *ngIf="budgetGroups$ | async; let bg;else loading">
<ion-item-sliding *ngFor="let b of budgetGroups$ | async | orderByBudgetGroup">
<ion-item>
<ion-label>{{b.name }}</ion-label>
<ion-radio [value]="b.id" (ionSelect)="selectedBudgetGroup(b)"></ion-radio>
</ion-item>
<ion-item-options side="right">
<button ion-button (click)="editBudgetGroup(b)" color="primary">
<ion-icon name="ios-create-outline"></ion-icon>
</button>
<button ion-button (click)="deleteBudgetGroup(b)" color="danger">
<ion-icon name="ios-trash-outline"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
<ion-item>
</ion-item>
</ion-list>
<ng-template #loading>
<ion-grid>
<ion-row class="header">
</ion-row>
<ion-row class="footer">
<ion-col col-12 class="font-size-14" text-center>
<div>
<P class="margin-bottom-0">No Budget Group. You can create them by </P>
<p class="margin-top-0">tapping the “+” button above</p>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ng-template>
.ts .TS
budgetGroups$: Observable<BudgetGroup[]>
ionViewDidLoad() {
this.budgetGroups$ = this.budgetGroupProvider.getAllBudgetGroups().valueChanges();
}
The problem is you're using
async
pipe twice.问题是您两次使用了
async
管道。 Remove it on the*ngFor
section.在
*ngFor
部分将其删除。
<ion-list radio-group [(ngModel)]="budgetGroup" *ngIf="budgetGroups$ | async; let bg;else loading">
<ion-item-sliding *ngFor="let b of bg | orderByBudgetGroup">
<ion-item>
<ion-label>{{b.name }}</ion-label>
<ion-radio [value]="b.id" (ionSelect)="selectedBudgetGroup(b)"></ion-radio>
</ion-item>
<ion-item-options side="right">
<button ion-button (click)="editBudgetGroup(b)" color="primary">
<ion-icon name="ios-create-outline"></ion-icon>
</button>
<button ion-button (click)="deleteBudgetGroup(b)" color="danger">
<ion-icon name="ios-trash-outline"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
<ion-item>
</ion-item>
</ion-list>
<ng-template #loading>
<ion-grid>
<ion-row class="header">
</ion-row>
<ion-row class="footer">
<ion-col col-12 class="font-size-14" text-center>
<div>
<P class="margin-bottom-0">No Budget Group. You can create them by </P>
<p class="margin-top-0">tapping the “+” button above</p>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ng-template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.