即使在加载数据后仍为空白模板：Angular 8

Question

在 Angular 中获取数据之前加载模板 8. 我使用 ngIf 指令仅在存在有效数据时加载模板。

在 ts 文件中，加载了数据（如附图所示，我使用 Chrome 调试器工具进行了检查），但未反映在模板中。

如何加载之前的数据并反映在模板中的变化？以及如何使模板随着动态变化而更新？

以下代码片段来自模板：

<ion-list *ngIf="snapshot" class='fund-snapshot-list' padding id='fund-snapshot-list-{{symbol}}'>

    <ion-item color="secondary">
      <ion-label id='fund-snapshot-list-index-{{symbol}}'>Index Value ({{index}})</ion-label>
      <ion-label id='fund-snapshot-list-index-value-{{symbol}}' text-right>{{snapshot.indexValue | number:'1.2-2'}}
      </ion-label>
    </ion-item>

    <ion-item color="secondary">
      <ion-label id='fund-snapshot-list-index-dividend-{{symbol}}' class='custom-width-label'>Index Dividend Yield
      </ion-label>
      <ion-label id='fund-snapshot-list-index-dividend-value-{{symbol}}' text-right>
        {{snapshot.indexDividendYield | number:'1.2-2'}}%</ion-label>
    </ion-item>

  </ion-list>

ts 文件：

export class FundSnapshotComponent {
snapshot: FundSnapshot;

constructor(private readonly cmsService: CmsService) {
  }

ngOnInit() {
this.snapshotSubscription = this.cmsService.getSectorSnapshots()
      .subscribe(snapshots => {
        this.snapshot = snapshots.find(snapshot => snapshot.sector === this.symbol);
        this.updateFields(this.snapshot);
      });
}

updateFields(snapshot: FundSnapshot) {
    if (snapshot === undefined) {
      return;
    }
    this.snapshot.indexValue = snapshot.indexValue;
    this.snapshot.indexDividendYield = snapshot.indexDividendYield;
} }

Answer 1

你能post html 文件内容吗？比如你如何做你的 *ngIf？

与此同时，也许您可以检查属性数据，而不仅仅是主要数据对象。

*ngIf=“snapshot && snapshot.sector”

Answer 2

这实际上是@ionic/angular 4.7.0 版本的问题：Angular 更改检测已损坏。

实际问题是：直接导航到一个页面按预期工作但导航到另一个选项卡，例如，不要。

升级到使用@ionic/angular框架的4.7.1，这将解决问题。

请参阅此 link 了解更多详情：https://github.com/ionic-team/ionic/issues/18894

即使在加载数据后仍为空白模板：Angular 8

Blank template even after data is loaded: Angular 8

angular

ionic4