时间戳

首页 > 解决方案 > IONIC/Angular：HTML 不显示来自 ts 文件的信息

javascript - IONIC/Angular：HTML 不显示来自 ts 文件的信息

问题描述

我在我的 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

标签： javascripthtmlangularionic-framework

解决方案

解决了我解决了这个问题，这要归功于这个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 页时加载。

推荐阅读