轉換可觀察到陣角4 HTTP

我已經被獲取的圖書列表服務本地我得到這個錯誤：轉換可觀察到陣角4 HTTP

BooksComponent.html:2 ERROR Error: Cannot find a differ supporting object 
'[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. 
    at NgForOf.webpackJsonp.../../../common/@angular/common.es5.js.NgForOf.ngOnChanges (common.es5.js:1681) 
    at checkAndUpdateDirectiveInline (

這是我的服務類：

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 
import { Books } from './books'; 

@Injectable() 
export class FetchbooksService { 
books:any[]; 
    constructor(private _http:Http) { } 
    fetch():Observable<Books[]>{ 
    return this._http.get('./assets/books.json').map(
     (response:Response)=> <Books[]>response.json(), 
     error => console.log(error) 
    ).do(data => console.log(data)); 
    } 
}

，這是組件：

import { Component, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { FetchbooksService } from '../fetchbooks.service'; 
import { Books } from '../books'; 
@Component({ 
    selector: 'app-books', 
    templateUrl: './books.component.html', 
    styleUrls: ['./books.component.css'] 
}) 
export class BooksComponent implements OnInit { 
bookss:Books[]; 
    constructor(private _bookservice: FetchbooksService) { 
    _bookservice.fetch().subscribe(
    (bookss)=> this.bookss = bookss, 
     error => console.log(error)= 
    ); 

    } 

    ngOnInit() { 
} 

}

書籍是一個接口請告訴我，我究竟做錯了什麼？

這是books.component.html：

<ul> 
    <li *ngFor = "let book of bookss "> 
    Book: {{book.title}} 
    </li> 
</ul>

，這是由服務返回的數據：
console.log(bookss) result

來源

2017-10-06 user3368703

此錯誤不是在'TS'側，它是一個HTML迭代錯誤。你能否發佈'BooksComponent.html'文件。該錯誤在該文件的'* ngFor'中。 –

如果我們還可以看到從服務中獲取的數據的'console.log'，那就太好了。即使你正在期待一系列書籍（'Books []'），你是否有機會獲得其他數據結構？ –

感謝您的答覆我已經添加了html和console.log的問題，請看看它，並告訴我什麼是錯的，謝謝你 – user3368703

如前所述，您沒有收到一個數組，但與物體嵌套對象。您需要使用自定義管道，或者轉換組件中的數據。

如果你想要與自定義管道...這是要走的路，，如果你需要保持關鍵！ ..我在這種情況下需要你的圖像。

進口必要的東西：

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ name: 'keys' }) 
export class ValuesPipe implements PipeTransform { 
    transform(value: any, args?: any[]): any[] { 
     let keyArr: any[] = Object.keys(value), 
      dataArr = []; 
     keyArr.forEach((key: any) => { 
      dataArr.push(value[key]); 
     }); 
     return dataArr; 
    } 
}

添加ValuesPipe您declarations陣列的模塊中，並使用它像在模板中的以下內容：

<div *ngFor="let book of bookss | keys"> 
    {{book.author }} : {{ book.title }} 
</div>

只是爲了未來的提示，記住，如果你使用管道，記住它是否需要是impure，那麼管道費用非常高，並且經常發生。

如果數據的構建不需要保持與接收時相同。因此，在接收到數據後，我會打電話，讓你的數據迭代，的方法，但在這裏，你失去的關鍵（需要做一些修改，以保持鍵）

_bookservice.fetch().subscribe(
(bookss) => { 
    this.bookss = bookss.books; 
    this.transform(); 
}, 
    error => console.log(error) 
); 

transform(books) { 
    let keyArr: any[] = Object.keys(books), 
    dataArr = []; 
    keyArr.forEach((key: any) => { 
     dataArr.push(books[key]); 
    }); 
    return dataArr; 
}

來源

2017-10-07 10:07:02 Alex

PS，這很可能是重複的，但是在搜索時我找不到一個，這將適用於這些特定的數據構建方式。 – Alex

轉換可觀察到陣角4 HTTP

回答

相關問題