Question

我在以前的angular版本中使用ng-repeat。易于使用。但是在新版本中，研究后我不再知道同一个过程，我知道我们需要使用ngfor，但是不知何故我遇到了错误。我进行了很多搜索，并提出了类似的问题，但对我而言，没有任何帮助。由于我是新手，所以很难理解。任何帮助将不胜感激。谢谢

这是我的打字稿：

C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin\MSBuild.exe

在ng的帮助下，我想打印这些值。

import { Injectable } from '@angular/core';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { ShopDetailPage } from '../shopdetail/shopdetail';


@Component({
  selector: 'page-shops',
  templateUrl: 'shops.html'
})

export class ShopsPage {
  shops = {};
  constructor(public navCtrl: NavController, private http: HttpClient){


    http.get('http://192.168.0.3:3000/api/shops').subscribe(
      (data:any) => {

        this.shops = data;
        console.log(data);
      }
    )



    };

}

这是我的.json

<div *ngFor='let shop of shops'>
  <p>{{shop.name}}</p>
</div>

Answer 1

您的data不是数组，而是包含数组的对象。您需要将this.shops的array属性分配给data。

某事

this.shops = data.shops; // or maybe another name

Answer 2

这是您的完美示例，

我在app.component.html页面中显示了结果，

您的示例json缺少]括号。我刚刚添加了一个]结尾数组，请在此处查看演示。

https://stackblitz.com/edit/angular-gtpiwd

Answer 3

您将shops定义为object

shops = {}; // Object

相反，创建一个array

shops = [];

收到错误的Http服务：NgFor仅支持绑定到数组等Iterable。”

3 个答案: