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;
  })
});