通常此问题是由于未正确处理异步数据而引起的。我们可以通过使用异步管道或者在返回的Observable对象中使用toPromise()方法来解决这个问题。

下面是使用异步管道的代码示例：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators/map';

@Component({
  selector: 'app-root',
  template: `
    

      
{{ item.name }}
    
  `
})
export class AppComponent {
  items: Observable;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.items = this.http.get('/api/items').pipe(map(res => res.data));
  }
}

在此代码中，我们使用了异步管道（async pipe）来处理异步数据。该管道会订阅Observable对象并自动处理其异步值。

另一个解决方法是使用toPromise()方法，如下所示：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    

      
{{ item.name }}
    
  `
})
export class AppComponent {
  items: any[];

  constructor(private http: HttpClient) {}

  async ngOnInit() {
    const data = await this.http.get('/api/items').toPromise();
    this.items = data.data;
  }
}

在该代码中，我们使用了toPromise()方法来等待Observable对象的返回结果。然后我们可以通过赋值操作来更新类中的items属性。