Question

我试图获取通过电话后调用得到的数据并在我的html页面中以离子形式显示。

我的Ts代码是

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Fashion</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list inset>
    <ion-item *ngFor="let user of (users | async) ">
      <h2>{{user.Name}}</h2>
      <p>Price : {{user.Price}}</p>
    </ion-item>
  </ion-list>
</ion-content>

我的html页面是

InvalidPipeArgument: '[object Object]

错误为[{ .... }, .. ].

但是我也在错误消息到来之前获取数据，所以当我点击上面图片上的关闭时我得到了我的数据，但我需要在进入页面后立即获取

EDIT1：我只是在切换到另一个标签并返回到此

时获取数据

EDIT2：伙计们，我忘了提到我的api回来了，它给了我[34] 即。

$(function(){
    var x = document.getElementById("myTextarea").value;
    var f=$('#prev')
    f.load(function(){ 
         f.contents().find('#demo').append(x);
    }) 
})

Answer 1

您的aync管道声明中存在错误，如下所示。您还使用相同的users属性来创建Observable并存储数据。创建一个新属性来存储数据。

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Fashion</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list inset>
    <ion-item *ngFor="let user of userData | async ">
      <h2>{{user.Name}}</h2>
      <p>Price : {{user.Price}}</p>
    </ion-item>
  </ion-list>
</ion-content>

编辑：在您的组件中创建一个新属性，如userData:any[] = []，如下所示 -

export class FashionPage {
  users: any;
  userData:any[] = []
  body: Object = {
    "id": 1014,
    "filter": null,
    "lat": 13.05831,
    "lng": 80.21195,
    "mapRadius": 5,
    "pageSize": 50,
    "pageStart": 1,
    "priceRangeFrom": 0,
    "priceRangeTo": 100000
  };
  constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {
    this.users = this.httpClient.post('myapi',this.body);
    this.users.subscribe(data => {
      this.userData = data;
      console.log('my data: ', data);
      console.log("the users data ------------>",this.userData);
    })
  }
}

Answer 2

将users = []初始化为async;因为observable需要一个 array或this.users = this.httpClient.post('myapi',this.body);
此外更改订阅的变量名称，

this.userResult = this.httpClient.post('myapi',this.body);

要，

<强> <ion-item *ngFor="let user of users | async ">
将html更改为<ion-item *ngFor="let user of users | async "> <h2>{{user.Name}}</h2> <p>Price : {{user.Price}}</p> </ion-item>

<强> HTML：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
@IonicPage()
@Component({
  selector: 'page-fashion',
  templateUrl: 'fashion.html',
})
export class FashionPage {
  users: any;
  ....
  constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {
    this.userResult = this.httpClient.post('myapi',this.body);
    this.userResult.subscribe(data => {
      this.users = data;
      console.log('my data: ', data);
      console.log("the users data ------------>",this.users);
    })
  }
}

所以 TS：

dplyr::mutate_all

Answer 3

api返回我[34]，即其中包含34个对象的数组。我需要一个单独的变量来存储数据并调用api。所以用来获取数据的代码是

HTML代码

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Fashion</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list inset>
    <ion-item *ngFor="let user of userData">
      <h2>{{user.Name}}</h2>
      <p>Price : {{user.Price}}</p>
    </ion-item>
  </ion-list>
</ion-content>

TS代码

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
@IonicPage()
@Component({
  selector: 'page-fashion',
  templateUrl: 'fashion.html',
})
export class FashionPage {
  users: any;
  userData = [];
  body: Object = {
    "id": 1014,
    "filter": null,
    "lat": 13.05831,
    "lng": 80.21195,
    "mapRadius": 5,
    "pageSize": 50,
    "pageStart": 1,
    "priceRangeFrom": 0,
    "priceRangeTo": 100000
  };
  constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {
    this.users = this.httpClient.post('myapi',this.body);
    this.users.subscribe(data => {
      this.userData = data;
      console.log('my data: ', data);
      console.log("the users data ------------>",this.userData);
    })
  }
}

你们这些人总是精彩，这个社区从来没有让我失望过一次......感谢所有人花了一百万的宝贵时间给我答案!!!!!!!!

无法显示离子中的数据

3 个答案: