Question

我在显示html页面上的信息时遇到问题，即从“ home-page.ts”向“ informacion-bar.page.ts”发送对象，然后在HTML上显示{{res?。 title}}可以在我的其他项目上使用，但是我不知道为什么现在不起作用，所以我需要一点帮助

对不起，我的英语水平较低

在这里，我有我的打字稿文件，我在其中获取数据并将其值分配给“ 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

您应该首先导入

，使其在回调中可观察到

import { Observable, of} from 'rxjs';

然后

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

然后将其查看为

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

我假设您使用的是离子4。在以前的版本中，可观测值的导入方式有所不同。

Answer 2

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

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

将其添加到构造函数中：

constructor(private zone: NgZone) {}

将代码包装在区域内：

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

Answer 3

已解决，我为此angularjs - events-publish-subscribe

解决了

在简历中，您需要先加载并准备在“ page2”上进行订阅，然后再从page1发送数据，因此需要在发布之前进行订阅，然后才能移至page2，进行订阅，然后再从page1发布数据。举个例子

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

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

}

第2页：加载第2页并在发布之前订阅，然后加载此订阅，然后按我在上一个代码中显示的那样发布数据

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

第2页的订阅必须位于构造函数上，以便在导航至第2页时加载。

IONIC /角度：HTML无法显示ts文件中的信息

3 个答案: