[英]Angular 4 : Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
I want to show the data from my backend (CodeIgniter) to my frontend (Angular 4), but this error come up: 我想显示从后端(CodeIgniter)到前端(Angular 4)的数据,但是出现此错误:
ERROR Error: Cannot find a differ supporting object '[object Object]' of type > 'object'. 错误错误:找不到类型>'对象'的其他支持对象'[对象对象]'。 NgFor only supports binding to Iterables such as Arrays. NgFor仅支持绑定到Iterables,例如数组。
This is my component: 这是我的组件:
import { BookService } from './../book.service';
import { Component, OnInit } from '@angular/core';
import { Book } from "../book";
@Component({
selector: 'app-book',
templateUrl: './book.component.html',
styleUrls: ['./book.component.css']
})
export class BookComponent implements OnInit {
constructor(public bookService: BookService ) { }
ngOnInit() {
this.getBooks();
}
books:Book;
getBooks(){
this.bookService.getBooks()
.subscribe(books=>{
this.books = books;
})
}
}
This is my service: 这是我的服务:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map' ;
@Injectable()
export class BookService {
constructor(private http: Http) {
}
books=[];
getBooks(){
return this.http.get("http://localhost/restserver/book/list_book.php")
.map(res => res.json());
}
}
My .json
: 我的.json
:
{"status":true,"data":
[{"id":"1","title":"SAINS","author":"ERLANGGA","isbn":"089928778"},
{"id":"2","title":"Geography","author":"ERLANGGA","isbn":"089182372"},
{"id":"3","title":"Math","author":"Srilangka","isbn":"091283181"},
{"id":"4","title":"test","author":"test","isbn":"1283798127"},
{"id":"5","title":"AAAA","author":"BBB","isbn":"91092301290"},
{"id":"6","title":"BBB","author":"CCC","isbn":"01920192"}]}
And this is my view: 这是我的观点:
<div class="container-fluid">
<div class="row">
<div class="card col-md-7">
<div class="card-body">
<table class="table table-responsive table-striped">
<caption>List of Books</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">ISBN</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let book of books" >
<th></th>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>{{book.isbn}}</td>
<td>
<button class="btn btn-primary "> Detail </button>
<button class="btn btn-success " [routerLink]="['/book-edit']"> Edit </button>
<button class="btn btn-danger "> Delete </button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<app-book-add class="col-md-5"></app-book-add>
Issue : 问题 :
You are assigning the whole response to books , but all you need is data. 您将整个响应分配给书,但是您所需要的只是数据。
1) First way to solve it 1)解决之道
Change this line from in component: 从组件中更改此行:
this.books = books;
to 至
this.books = books.data;
2) Or you can also do this in template: 2)或者您也可以在模板中执行以下操作:
Change this : 改变这个:
<tr *ngFor="let book of books" >
to 至
<tr *ngFor="let book of books?.data" >
books
should be collection of Book
& then set data
property of returned response. books
应该是Book
集合,然后设置返回响应的data
属性。
books:Book[]; //this should be change inside Component.
//service method should return data prop from it.
getBooks(){
return this.http.get("http://localhost/restserver/book/list_book.php")
.map(res => res.json().data);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.