角度2 HTTP請求json數據不顯示不使用| JSON

-1

Json數據不顯示。我正在做一個httpGet，一切似乎都很好。看來數據被加載到我的數組中，並且有3個對象。然而，沒有任何內容顯示在HTML，{{associateList}}中，或者當我執行「console.log」時。我必須把它管到JSON {{associateList | JSON}}然後我得到了所有東西，當然這一切都在一個大塊。我似乎無法訪問數組中的單個對象，我似乎無法弄清楚該怎麼做。角度2 HTTP請求json數據不顯示不使用| JSON

這是我獲得服務：

getAssociatesData(){ 
    return this.http.get('http://Api/Associates').map(res =>res.json());

這是我如何訂閱和其他的東西：

associateList: associateData[]; 

this.GetDataServices.getAssociatesData().subscribe(
    associates =>{this.associateList= (associates)}, 
    error => this.serviceError=error, 
    () => { 
      this.formatAssociates(); 
      console.log('associates loaded'); 
      //this.isLoading.next(false) 
      } 
); 
formatAssociates(){ 
    let associateCount = this.associateList.length; 
    console.log('number of associates: ' + associateCount); 
    this.showAssociates = true; 
} 
interface associateData{ 
id : number; 
firstName : string; 
lastName : string; 
middleName : string; 
fullName : string; 
}

而在HTML：

<div *ngIf="showAssociates"> 
    <span *ngFor="let associate of associateList; let count=index"> 
    <div id={{count}} > 
     associate# = {{count}} 
     associateID = {{(associate | async).id}} 
     First Name = {{associate.firstName}} 
     Last Name = {{associate.lastName}} 
     Middle Name = {{associate.middleName}} 
     Full Name = {{associate.fullName}} 
    </div> 
</span> 
</div> 

{{associateList | json}}

的問題是，我當我將「associateList」傳遞給json時，只能看到數據。我無法顯示個別元素。

來源

2017-05-03 Gabriel O

你的JSON是怎樣的？你可以發佈嗎？ :) – Alex

據我所見，你有一個名爲formatAssociates()的方法this.showAssociates = true;，這個方法在錯誤的情況下被觸發，所以在設置this.associateList之後，你會看到這些值。

你沒有看到它們導致變量可能是undefined或false，所以爲了快速嘗試，刪除if條件來證明我的理論。

希望它有幫助。

來源

2017-05-03 23:39:09

這不是。它輸出的字段名稱：關聯＃= associateID = .... –

以及你應該給你更多的信息，你面臨着什麼，這並沒有太多你的意見。 json格式，plunkr ... –

您的控制檯是否顯示任何錯誤？最近我有類似的問題，這是由於HTML渲染比異步調用更快。檢查此鏈接

Unable to display object array of an object in Angular 2 template

來源

2017-05-04 01:11:40 amulamul

我使用「showAssociates」在數組中有東西后控制HTML的呈現。 Console.log也不會給我數據。我想知道我正在閱讀的HTTP數據是否在標題中缺少某些內容，但當我通過將其管理到JSON來查看它時，它看起來很好。 –

控制檯沒有錯誤。 –

@GabrielO如果您將模板中的所有數據傳遞給json，那麼您只需要擔心的是如何使用ngFor和ngIf。代碼看起來不錯。你能模擬你的代碼嗎？所以我們很容易玩你的代碼。 – amulamul

你的問題是，你需要你的角度分量的init生命週期內執行該服務。

import {Component, OnInit} from '@angular/core'; 

//components stuff goes here 

export class AssociateComponent implements OnInit { 
    associateList: associateData[]; 
    constructor(getAssociateDataService: getAssociateDataService) {} 

    ngOnInit(){ 
    this.GetDataServices.getAssociatesData().subscribe(
     associates =>{this.associateList= (associates)}, 
     error => this.serviceError=error, 
    () => { 
      this.formatAssociates(); 
      console.log('associates loaded'); 
      //this.isLoading.next(false) 
      } 
    ); 
    } 
    formatAssociates(){ 
    let associateCount = this.associateList.length; 
    console.log('number of associates: ' + associateCount); 
    this.showAssociates = true; 
    } 
    interface associateData{ 
    id : number; 
    firstName : string; 
    lastName : string; 
    middleName : string; 
    fullName : string; 
    } 
}

來源

2017-05-04 03:57:26

它在ngOnInit中。沒有什麼不同。數據被加載到associateList數組中，並檢查顯示對象的確切數量的長度。我似乎無法訪問單個對象，只能看到管道到JSON時的所有內容。 –

角度2 HTTP請求json數據不顯示不使用| JSON

回答

相關問題