使用 route.params 时 Angular2 无法显示来自 http 的数据

Question

我正在学习 Angular2 从 $http GET 请求中获取数据。现在，数据没有显示。我认为这是因为我的服务在我的组件呈现后传递了数据。我做了一些搜索，但仍然没有得到它。我在我的代码中添加了两个 console.log(data)，这是我的控制台的屏幕截图。

这是我的 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;
}

更新我的问题： table 显示在网页上，但没有数据显示。
当我在控制台中打开 "Object" 时，我得到了这个：

有人对此有任何想法吗？非常感谢你。如果您需要更多信息，请给我留言。

Answer 1

您的 console.log() 在 subscribe() 之外...异步调用，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 ! -->

Answer 2

您可以从 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>

使用 route.params 时 Angular2 无法显示来自 http 的数据

Angular2 cannot display the data from http when using route.params

angular

angular2-routing

angular2-services