當使用route.params時，Angular2無法顯示來自http的數據

我正在學習Angular2從$ http GET請求獲取數據。目前，數據並未顯示出來。我認爲這是因爲我的服務在我的組件渲染後傳遞了數據。我做了一些搜索，但仍然沒有得到它。我在代碼中添加了兩個console.log(data)，這裏是我的控制檯的屏幕截圖。當使用route.params時，Angular2無法顯示來自http的數據

這是我在ngOnInit()ARR-detail.component.ts：

import { TbArr } from './../../shared/models/tb_arr'; 
private data: TbArr; 
ngOnInit() { 
//method 1 
    this.route.params 
    .switchMap((params: Params) => this._dbService.get('MyAPI.php', 'id=' + params['id'])) 
    .subscribe((d:TbArr) => this.data = d) 
    console.log(this.data); 

/**method 2 
* this.id = this.route.snapshot.params['id']; 
* this._dbService.get('MyAPI.php', 'id=' + this.id) 
*  .subscribe(d => { 
*   this.data = d; 
*  }); 
**/ 
/**method 3 
* this.route.params.subscribe(params => { 
* if (params['id']) { //got the id from url 
*  this._dbService.get('MyAPI.php', 'id=' + params['id']) 
*  .subscribe(d => { 
*   this.data = d; 
*  }); 
* } 
* }); 
**/ 
}

這裏是db.service.ts我GET功能：

get(api: string, options: any) { 
    return this.dbRequest('get', api, options); 
} 
dbRequest(method: string, api: string, options: string) { 

    let observable: any; 
    const backendUrl_json = 'http://XXX.XX.XX.XX/api/json/'; 
    observable = this.http[method](backendUrl_json + api, {search: options}); 
    observable = observable.map(res => res.json()); 
    console.log(method, backendUrl_update + api, options); 
    observable.subscribe(
       d => { console.log(d); }, 
       e => { console.log(e); } 
      ); 
    return observable; 
}

這裏我的組件html文件：

<table *ngIf="data"> 
    <tbody> 
    <tr> 
     <td>ID:</td> 
     <td>{{data?.id | async}}</td> 
    </tr> 
    <tr> 
     <td>Date:</td> 
     <td>{{data?.date | async}}</td> 
    </tr> 
    </tbody> 
</table>

這裏是我的tb_arr具有TbArr接口：

export interface TbArr { 
    id:number; 
    date:any; 
}

更新我的問題：該表顯示了網頁上，但沒有數據顯示。
當我在控制檯打開「對象」，我得到這個：

沒有人對此有任何想法？非常感謝你。如果您需要更多信息，請留下評論。

來源

2017-03-24 jmu

你可以添加你的json的樣子嗎？或者更確切地說，當你使用console.log時數據是怎樣的？ – Alex

@ AJT_82我添加了控制檯截圖。 – jmu

你可以從你的console.log看你正在處理一個數組中的對象。如果您始終只是在陣列中接收一個對象，請從陣列中提取它....您可以在訂閱時從陣列中提取對象，或者需要在模板中正確訪問它，這意味着：

{{data[0].id}}

這裏我選擇提取認購對象：

this.route.params 
    .switchMap((params: Params) => this._dbService.get('MyAPI.php', 'id=' + params['id'])) 
    .subscribe(data => { 
    this.data = data[0]; // extract the object 
    console.log(this.data); 
    })

現在，您可以訪問您的模板對象的屬性：

<table> 
    <tbody> 
    <tr> 
     <td>ID:</td> 
     <td>{{data?.id}}</td> 
    </tr> 
    <tr> 
     <td>Date:</td> 
     <td>{{data?.date}}</td> 
    </tr> 
    </tbody> 
</table>

來源

2017-03-24 19:52:25 Alex

謝謝。非常感謝你。它像迷人的一樣工作。我只是注意到這是一個非常愚蠢的問題。謝謝您的回答。 :) – jmu

非常歡迎......並且正如他們所說的那樣，沒有愚蠢的問題，只有愚蠢的答案;）嘿，我們有時會犯最愚蠢的錯誤，至少我有我的facepalm時刻的份額：D但很高興我們把它整理出來。週末愉快，編程愉快！ :) – Alex

您的console.log()不在subscribe()之內......調用beign異步，this.data尚未填充。

這應該工作：

this.route.params 
    .switchMap((params: Params) => this._dbService.get('MyAPI.php', 'id=' + params['id'])) 
    .subscribe((d:TbArr) => { 
    this.data = d[0]; 
    console.log(this.data); 
    })

上的數據把一個async管道不有道理的，因爲data不是可觀察到的：

<td>{{data?.date | async}}</td> <!-- wrong ! --> 
<td>{{data?.date}}</td> <!-- right ! -->

來源

2017-03-24 15:33:41 n00dl3

我根據您的建議修改了我的代碼。但只有控制檯顯示數據，我的網頁仍然不顯示任何數據。你有什麼想法爲什麼它不顯示？ – jmu

當使用route.params時，Angular2無法顯示來自http的數據

回答

相關問題