Question

我正在学习Angular2以从$ http GET请求获取数据。目前，数据还没有显示出来。我认为这是因为我的服务在我的组件渲染后传递了数据。我做了一些搜索，但仍然没有得到它。我在代码中添加了两个env db:user="test value for db:user" ./yourscript，这是我的控制台的屏幕截图。

以下是 arr-detail.component.ts 中的console.log(data)：

ngOnInit()

这是我在 db.service.ts 中的GET功能：

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

这是我的组件html文件：

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

这是我的 tb_arr ，它有TbArr接口：

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

更新我的问题：该表格显示在网页上，但没有数据显示当我打开＆＃34;对象＆＃34;在控制台中，我得到了这个：

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

Answer 1

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

Answer 2

您的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 ! -->

使用route.params时，Angular2无法显示http中的数据

2 个答案: