尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象答案

【问题标题】：Error trying to diff '[object Object]'. Only arrays and iterables are allowed尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象
【发布时间】：2018-09-14 11:21:09
【问题描述】：

我收到以下错误

"ERROR 错误：尝试比较 '[object Object]' 时出错。仅数组并且在运行时允许迭代”。

我正在使用 JSON 响应并尝试在 UI 中以表格格式显示它。请找到附加的代码，让我知道我所做的代码中的错误是什么

JSON webservice

{
  "data": [{
    "action": "ok",
    "btl_count": 2,
    "created_user_nm": "jyjohn2",
    "modified_dt": "Wed, 04 Apr 2018 14:32:10 GMT",
    "order_sales_rep_cuid": "jyjohn2",
    "qoa_prd_envlp_instance_id": 7363849,
    "qoa_sales_order_id": 238196381,
    "status_cd": "SUB_TO_OEC",
    "submit_status_cd": "BK_GLOBAL_F"
  }]
}

post.model.ts

export interface Posts {
  //userid:number;
  //id:number;
  //title:string;
  //body:string;
  action: string;
  btl_count: number;
  created_user_name: string;
  modified_dt: Date;
  order_sales_rep_cuid: string;
  qoa_prd_envlp_instance_id: number;
  qoa_sales_order_id: number;
  status_cd: string;
  submit_status_cd: string;
}

post.service.ts

import {
  Injectable
} from '@angular/core';
import {
  Posts
} from './post.model';
import {
  Http
} from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class PostsService {
  serviceURL: string = "URL(not mentioning the URL for security reason)"
  constructor(private http: Http) {}
  getPosts() {

    return this.http.get(this.serviceURL).map((resp) => {
      return resp.json()

    })
  }
}

app.component.ts

import {
  Component
} from '@angular/core';
import {
  PostsService
} from './posts.service';
import {
  Posts
} from './post.model';

@Component({
  selector: 'app-root',
  template: ` <
h1 > {
    {
      title
    }
  } < /h1> <
  table border = "1"
class = "colwidth" >
  <
  tr >
  <
  th > action < /th> <
  th > btl_count < /th> <
  th > created_user_nm < /th> <
  th > modified_dt < /th> <
  th > order_sales_rep_cuid < /th> <
  th > qoa_prd_envlp_instance_id < /th> <
  th > qoa_sales_order_id < /th> <
  th > status_cd < /th> <
  th > submit_status_cd < /th> <
  /tr> <
  tr * ngFor = "let data of DataArray" >
  <
  td > {
    {
      data.action
    }
  } < /td> <
  td > {
    {
      data.btl_count
    }
  } < /td> <
  td > {
    {
      data.created_user_nm
    }
  } < /td> <
  td > {
    {
      data.modified_dt
    }
  } < /td> <
  td > {
    {
      data.order_sales_rep_cuid
    }
  } < /td> <
  td > {
    {
      data.qoa_prd_envlp_instance_id
    }
  } < /td> <
  td > {
    {
      data.status_cd
    }
  } < /td> <
  td > {
    {
      data.submit_status_cd
    }
  } < /td> <
  /tr> <
  /table>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  //objectKeys = Object.keys;
  //objPosts:Posts;
  DataArray: any = [];
  constructor(private postsService: PostsService) {

  }
  getPeople(): void {
    this.postsService.getPosts().subscribe(
      data => {
        this.DataArray = data;
        console.log(data)
      },
      (error) => console.log(error),
      () => console.log("Complete")
    )
  }

  ngOnInit() {
    this.getPeople();
  }
}

【问题讨论】：

显示 console.log(data) 以查看响应
请从 console.log{data: Array(5)} data 中找到响应： Array(5) 0 : {action: "ok", btl_count: 38, created_user_nm: "slstst5", modified_dt ：“格林威治标准时间 2018 年 4 月 5 日星期四 02:23:49”，order_sales_rep_cuid：“slstst5”，...} 1：{action：“ok”，btl_count：40，created_user_nm：“slstst5”，modified_dt：“2018 年 4 月 5 日，星期四格林威治标准时间 02:23:30”，order_sales_rep_cuid：“slstst5”，...} 2：{action：“ok”，btl_count：2，created_user_nm：“slstst5”，modified_dt：“周四，2018 年 4 月 5 日 02:16:34 GMT” , order_sales_rep_cuid: "slstst5", …}

标签： angular

【解决方案1】：

看起来您的响应信息以以下格式返回：

resp = {"data": [<list of properties>]}

返回resp.json()给组件进行迭代，但响应本身不是数组。尝试返回 resp.json().data，它应该发送响应的数组部分。

【讨论】：

【解决方案2】：

抱歉，这里回复晚了。

我得到了简单的解决方案，请在下面找到

getPeople(): void {
    this.postsService.getPosts().subscribe(
      data => {
        this.DataArray = data as string[];
        console.log(data)
      },
      (error) => console.log(error),
      () => console.log("Complete")
    )
  }

只需附加 作为字符串[] 结果结尾

【讨论】：

【解决方案3】：

你也可以在这一行添加'.data'，'in tr * ngFor = "let data of DataArray.data" >`

【讨论】：