Question

我想将后端（CodeIgniter）的数据显示到我的前端（Angular 4），但是这个错误出现了：

错误错误：无法找到不同的支持对象＆＃39; [object Object]＆＃39;类型＆gt; ＆＃39;对象＆＃39 ;. NgFor仅支持绑定到Iterables，例如Arrays。

这是我的组成部分：

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;
    })

  }
}

这是我的服务：

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());
    } 


}

我的.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"}]}

这是我的观点：

<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>

Answer 1

问题：

您正在为书籍分配整个回复，但您需要的只是   数据

1）解决问题的第一种方法

从组件中更改此行：

this.books = books;

到

this.books = books.data;

2）或者您也可以在模板中执行此操作：

改变这个：

<tr *ngFor="let book of books" >

到

<tr *ngFor="let book of books?.data" >

Answer 2

books应该是Book＆amp;然后设置返回响应的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);
}

Angular 4：找不到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到诸如Arrays之类的Iterables

2 个答案: