尝试区分[object object]＆＃39;时出错。只允许数组和迭代

Question

我收到以下错误

  

＆＃34; 错误错误：尝试差异＆＃39; [对象]＆＃39;时出错。只有数组   允许迭代＆＃34;在运行期间。

我正在使用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();
  }
}

Answer 1

看起来您的回复信息的格式为：

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

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

Answer 2

很抱歉在这里延迟回复。

我有简单的解决方法，请在下面找到

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

只需将作为字符串[] 添加到结果末尾

Answer 3

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