在 ngFor 的帮助下迭代 Angular5 中的 JSON 数组

Posted 2023-03-13

【中文标题】在 ngFor 的帮助下迭代 Angular5 中的 JSON 数组

【英文标题】：Iterating the JSON Array in Angular5 with the help of ngFor

【发布时间】：2018-11-19 17:26:20

【问题描述】：

我正在使用 Angular5 构建项目。我被困在*ngFor。 我有一个模型类如下：

export class FetchApi 
  value: Array<String>;
  api_status: string;
  api_version: string;
  data: Array<String>;

我的 component.ts 正在从服务接收数据，该服务正在调用 API 并获取数据。

我的服务代码是：

public getUsers()  
    console.log("heyyy"+this.fetchUrl);
    return this.http.get <FetchApi[]> (this.fetchUrl); 

我的组件代码是：

ngOnInit() 
     const scope = this;
    this.userService.getUsers()
      .subscribe( data => 
        this.fetchApi = of(data);
        console.log(this.fetchApi)
        //this.fetchApi = data;
      );
  ;

API 返回的 JSON 格式如下：

"api_status": "200", "api_version": "1.0", "data": "featured": [ "id": 1, "vid": "", "uid": , "title": "", "description": "" ]

我想借助 <tr *ngFor="let fetch-api of fetchApi "> 在我的 html 页面上呈现响应，但是出现错误：

FetchApiComponent.html:22 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngOnChanges (common.js:3121) at checkAndUpdateDirectiveInline (core.js:8941) at checkAndUpdateNodeInline (core.js:10209) at checkAndUpdateNode (core.js:10171) at debugCheckAndUpdateNode (core.js:10804) at debugCheckDirectivesFn (core.js:10764) at Object.eval [as updateDirectives] (FetchApiComponent.html:22) at Object.debugUpdateDirectives [as updateDirectives] (core.js:10756) at checkAndUpdateView (core.js:10153) at callViewAction (core.js:10394)

请让我知道我做错了什么，因为我是 Angular5 的新手。如何在我的 HTML 页面上获取我的 JSON 数组。

【参考方案1】：

你应该在你的 html 中这样做来处理 html 中的错误

  <tr *ngFor="let fetch-api of fetchApi?.data?.featured">

在你的打字稿中：

this.userService.getUsers()
  .subscribe((data) => 
    this.fetchApi = data;
    console.log(this.fetchApi)
    //this.fetchApi = data;
  );

希望对你有帮助！！！

【讨论】：

@N Sharma 尝试将代码 of(data) 替换为 data 只是因为它返回 observable。

【参考方案2】：

你应该写

<tr *ngFor="let fetchApi of fetchApi.data.featured">

For/loop 应该在数组中执行并且 fetchApi 是 object

然后你可以像下面这样显示你的数组的 json

    <tr *ngFor="let fetchApi of fetchApi.data.featured">
      <td>fetchApi | json</td>
    </tr>

对于打印 ID，如下所示

        <tr *ngFor="let fetchApi of fetchApi.data.featured">
          <td>fetchApi.id</td>
        </tr>

【讨论】：

我这样做了，现在又遇到了另一个错误：ERROR TypeError: Cannot read property 'featured' of undefined at Object.eval [as updateDirectives] (FetchApiComponent.html:22) at Object.debugUpdateDirectives [as updateDirectives] (core.js:10756) at checkAndUpdateView (core.js:10153) at callViewAction (core.js:10394) at execComponentViewsAction (core.js:10336) at checkAndUpdateView (core.js:10159) at callViewAction (core.js:10394) at execEmbeddedViewsAction (core.js:10357) at checkAndUpdateView (core.js:10154) at callViewAction (core.js:103)

在 OnInit 函数中 console.log(this.fetchApi) 之后，您在控制台中看到了什么？

我正在获取 JSON

我知道你得到了json，它的内容是什么，粘贴在这里

Observable _isScalar: true, _subscribe: ƒ, value: … value : api_status : "200" api_version : "1.0" data : featured : (10) […, …, …, …, …, …, …, …, …, …] latest : (10) […, …, …, …, …, …, …, …, …, …] top : (6) […, …, …, …, …, …] __proto__ : Object __proto__ : Object _isScalar : true _subscribe : ƒ (subscriber) __proto__ : Object