IONIC/Angular：HTML 不显示 ts 文件中的信息

Question

我在我的 html 页面上显示信息时遇到问题，我将一个对象从“home-page.ts”发送到“informacion-bar.page.ts”，然后我用 {{ res?.title }} 在 html 上显示它们这适用于我的另一个项目，但我不知道为什么现在它不起作用所以我需要一点帮助

对不起我的英语水平低

在这里，我有我的打字稿文件，我在其中获取数据并将值分配给“res”并在我的 html 上使用它

这是我的 html，您可以在其中看到使用离子组件并尝试显示信息非常简单

我的控制台显示具有“title”和“snippet”属性的对象

控制台不会向我发送任何错误，只是一个小小的警告“导航在 Angular 区域外触发，您是否忘记调用 'ngZone.run()'？” 我忽略了，我的结果显示“信息：''”只是空白，标签也是空白

TS

export class InformacionBarPage implements OnInit {
  public res: any;
  constructor(public events2: Events) {
    this.events2.subscribe('my-message', (data) => {
      this.res = data;
      console.log(this.res);
      console.log(this.res.snippet);
    });
   }

  ngOnInit() {
  }

}

HTML

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>
        test: {{ res?.snippet }}
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

安慰：

{position: {…}, title: "Bar de prueba 1", snippet: "Billar, Espacioso, Tranquilo", icon: {…}, animation: undefined, …}
animation: undefined
disableAutoPan: false
draggable: false
flat: false
icon: {url: "assets/imgs/marker_bar.png", size: {…}, anchor: Array(2)}
infoWindowAnchor: (2) [16, 0]
noCache: false
opacity: 1
position: {lng: -6.206721, lat: 36.528835}
rotation: 0
snippet: "Billar, Espacioso, Tranquilo"
title: "Bar de prueba 1"
visible: true
zIndex: 0
__proto__: Object

Answer 1

解决了我解决了这个angularjs - events-publish-subscribe

在简历中，您需要在从 page1 发送数据之前加载并准备好在 'page2' 上的订阅，因此您需要在发布之前订阅，然后您可以移动到 page2，订阅然后从 page1 发布数据我会让你例子

第 1 页：导航到第 2 页，加载他的构造函数然后“发布”

enviarPosicion() {
this.zone.run(() => {
  this.nav.navigateForward('/lista-bares').then(() => {
    this.events1.publish('posicion_usuario', this.posicion);
  });
});

}

第 2 页：加载 page2 并在发布之前订阅，然后加载此订阅，然后发布数据，就像我在最后一个代码中向您展示的那样

    this.events1.subscribe('posicion_usuario', (pos) => {
    this.lat = pos.lat;
    this.lng = pos.lng;
  });
}

订阅第 2 页需要在构造函数上，以便在您导航到第 2 页时加载。

Answer 2

您应该首先导入，使 res 在回调中成为可观察的

import { Observable, of} from 'rxjs';

进而

this.events2.subscribe('my-message', (data) => {
  this.res = of(data);
  //
});

然后将其视为

{{ (res | async)?.propertyname }}

我假设您使用的是 ionic 4。在以前的版本中，Observables 的导入方式不同。

Answer 3

我遇到了同样的问题，我使用来自@angular/core 的 NgZone 解决了它。 不知道这是否是最好的方法，但它确实对我有用。

import {NgZone} from '@angular/core';

将其添加到构造函数中：

constructor(private zone: NgZone) {}

将代码包裹在区域内，如下所示：

this.events2.subscribe('my-message', (data) => {
  this.zone.run(() => {
    this.res = data;
  })
});