Angular 5从服务到组件到模板的数据问题 [英] Angular 5 getting array issue with data from service to component to template

问题描述

尝试在模板HTML中显示从组件到服务调用的数据，调用并返回API，但我收到此错误

Trying to display data in template HTML from a component to service call which calls and returns an API, but I'm getting this error

ERROR错误：无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到Iterables，例如Arrays。

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

HTML

<li *ngFor="let item of testing"> 
   <a [routerLink]="[item.url]" > 
    <span>{{item.name}}</span>
   </a>
</li>

组件

testing: any;

this.arsSevice.getMenu()
     .subscribe(
         result => {
            this.testing = result;
            console.log('menu',result);
      },
      error => {
         console.log('menu error', error);
      }
      )

服务：

getMenu()  {
    return this.http.post(this.menuUrl, JSON.stringify({
        "UserID": 61525,
        "AppID": 15,
        "NavAppID":null,
        "AppGroupID": 116,
        "SelectedCaseID": 0,
        "SelectedRoleID":0            
    }), httpOptions)
        .map((response: Response)=> {
            return response;
        })
}

数据的图片截图

更新

我发现数据存在问题

menu有数据：，这是什么，这是什么，不工作。

"menu" has data: and it what is HERE and NOT working.

工作的是来自不同的API调用
注意是

the working one is from a different API call Notice that is has

data：Array（16）

data: Array(16)

如何从对象到数组修复数据？

How can I fix my data from object to array ?

推荐答案

试试这个： * ngFor =let item of testing.data.Menu1Items。我不相信你需要异步管道。我也会 * ngIf 哪个div包含 * ngFor 循环。

Try this: *ngFor="let item of testing.data.Menu1Items". I do not believe you need the async pipe for this. I would also *ngIf which ever div is containing the *ngFor loop.

如下所示：

<div *ngIf="testing">
    <li *ngFor="let item of testing.data.Menu1Items"> 
       <a [routerLink]="[item.url]" > 
        <span>{{item.name}}</span>
       </a>
    </li>
</div>

请告诉我这是否有助于实现您的目标。

Let me know if this can help out with what you are trying to achieve.

编辑：

所以我建议在向客户返回响应时以不同方式格式化数据，这是如何在返回数据之前格式化数据：

So I would suggest formatting your data differently when returning a response to your client, this is how I would format the data before its returned:

[
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu1Items'
  },
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu1Items'
  },
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu2Items'
  },
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu2Items'
  }
];

然后，如果要按照您选择的字段对数据进行分组，请通过此方法运行数组，它会将分组到不同数组的数据吐出：

Then if you want to group the data by whichever field you choose, run the array through this method and it will spit out the data grouped into separate arrays:

transformArray(array: Array<any>, field) {
    if (array) {
      const groupedObj = array.reduce((prev, cur) => {
        if (!prev[cur[field]]) {
          prev[cur[field]] = [cur];
        } else {
          prev[cur[field]].push(cur);
        }
        return prev;
      }, {});
      return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
    }
    return [];
  }

这是变换前的数据的控制台日志，之后是转化：

Here is a console log of the data before its transformed and then after its been transformed:

所以第一个数组只是什么应该从服务器返回，第二个数组是在转换后。

So the first array is just what should be returned from the server, and the second array is after the transformation.

然后在标记中循环显示，这里是 * ngFor 的结构：

Then to loop through this in your markup, here is the structure of the *ngFor:

<div *ngFor"let category of data">
  <div>{{ category.key }}</div>
  <div *ngFor="let item of category.value">
    {{ value.name }}
  </div>
</div>

我希望这可以有所帮助，我认为你的第一步应该是在返回之前格式化该数组客户端作为未按键分组的对象数组，然后一旦它到达客户端就操纵数据。

I hope this can be of help, I think your first step should be formatting that array before its returned to the client as an array of objects not grouped by a key, and then manipulate the data once it hits your client.

这篇关于Angular 5从服务到组件到模板的数据问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！