Ionic 4 Angular模板与异步管道绑定到可观察

Posted 2023-02-23

【中文标题】Ionic 4 Angular模板与异步管道绑定到可观察

【英文标题】：Ionic 4 Angular template binding with async pipe to observable

【发布时间】：2018-11-19 03:23:54

【问题描述】：

我正在将旧的 ionic 应用程序从 V2 移动到 V4-alpha，并且无法使用异步管道在模板中绑定到 observable。问题是在嵌套在另一个带有 *ngIf 的元素内的元素上使用 *ngFor。不使用*ngIf时表格显示正常，但包含*ngIf时不显示数据表，用于在不同数据表之间切换。

在组件中：

this.indLbdPlayers = this.fsService.getPlayersByIndScore(id);
this.indLbdPlayers.subscribe(players => 
  this.indArray = players;
);

在哪里

indLbdPlayers: Observable<HSPlayer[]>;
indArray: HSPlayer[];

在模板中： <div *ngIf="!showTeamLbd"> <table> ... <tr *ngFor="let player of indLbdPlayers | async; let ro = odd; let i = index;"

不显示任何内容。但是，当在模板中使用它时：

<div *ngIf="!showTeamLbd"> <table> ... <tr *ngFor="let player of indArray; let ro = odd; let i = index;" let ro = odd; 即没有异步管道到可观察但在组件中订阅可观察，然后数组按预期显示。

来自离子信息：

cli 包：(/usr/local/lib/node_modules)

@ionic/cli-utils : 2.0.0-rc.6 离子（离子 CLI）：4.0.0-rc.6

全局包：

科尔多瓦（科尔多瓦 CLI）：8.0.0

本地包：

@angular-devkit/core : 0.6.0

@angular-devkit/schematics : 0.6.0

@angular/cli：6.0.1

@ionic/schematics-angular : 1.0.0-rc.6

Cordova 平台：无

离子框架：@ionic/angular 4.0.0-alpha.7

【参考方案1】：

试试这个，

  *ngFor="let player of (indLbdPlayers | async)"; let ro = odd; let i = index;"

【讨论】：

谢谢，但这没什么区别。我的 observable 来自我查询 Firestore 的 Angularfire2。我有一个纯 Angular (6.0.X) 的兄弟应用程序，它对同一数据库执行类似的查询，并且异步管道按预期呈现。我希望这很简单，但我开始担心它对 ionic/angular v4 来说更为基础。

更新了上面的问题 - 这个问题似乎与 *ngFor 嵌套在 *ngIf 中有关，即使在不同的元素上。