在 ionic 中打印来自 REST api 的 JSON 响应

Question

我正在尝试打印从 RESTful API 请求中获得的 JSON 响应：

products:Observable<any>;
constructor(public navCtrl: NavController, private backgroundGeolocation: BackgroundGeolocation, public zone: NgZone, private auth: AuthService, public httpClient: HttpClient)
{

    this.products = this.httpClient.get('http://127.0.0.1:8000/product');
}

如果我在控制台中打印结果，它确实可以正常工作：

this.products
      .subscribe(data => {
        console.log('my data: ', data);
      });

数据是对的。

但是现在，我不知道如何将它们打印到 HTML 页面上。我试过了，但它不起作用：

<ion-list>
        <ion-item *ngFor="let p of (products | async)?.results">{{ p.productName}}
        </ion-item>
</ion-list>

还有其他方法可以解决问题吗？

我的 JSON 响应是这样的：

0: Object { idProduct: "1", productName: "Pasta", purchased: "0" }
​
1: Object { idProduct: "2", productName: "latte", purchased: "0" }

我已经解决了这个问题。我想发布解决方案以帮助其他用户在这种糟糕的情况下。 解决方案就是这么简单。我创建了一个名为“rest-service”的新打字稿文件，由：

@Injectable()
export class RestServiceProvider {

  constructor(public http: HttpClient) {
    console.log('Hello RestServiceProvider Provider');
  }
  getUsers() {
    return new Promise(resolve => {
      this.http.get('http://127.0.0.1:8000/product').subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
  }
}

现在，在 home.ts 中我已经做到了：

getUsers() {
    this.restProvider.getUsers()
      .then(data => {
        this.products = data;
        console.log(this.products);
      });
  }

然后，在构造函数中：

this.getUsers();

在HTML端，解决方法非常非常简单：

<ion-item *ngFor="let p of products"> {{ p.productName }}

不过，谢谢大家

Answer 1

请尝试将产品转换为数组对象。这可能会解决您的问题。

this.products = this.products.json();

Answer 2

更新

看来您找到了解决方案。通常我不喜欢直接在函数中使用*ngFor

<!-- DON'T DO THIS -->
<ion-item *ngFor="let item of someFunction()">

而是在构造函数之上定义一个变量，然后赋值数据。不需要单独的文件，但如果您一遍又一遍地执行相同的请求，它会很有用。

TypeScript

items: Array<any> = [];

constructor() {
  // ...
}

ionViewDidLoad() {
  this.http.get('https://someurl.com/data').subscribe((data: any) => {
    this.items = data;
  }).catch(err => console.error('Something went wrong: ', err));
}

HTML

<ion-item *ngFor="let item of items">
    {{ item.name }}
</ion-item>

旧答案

如果你只是跟随会发生什么？

<ion-item *ngFor="let p of products">

您尝试访问 products-array 上的 .results 的任何原因？

如果您在控制台中遇到任何错误，请与我们分享。