typescript - 使用 Observable 和 HttpClient 的 Angular 5 GET 数据 - 从 Web API 获取数据

Question

努力阅读关于如何使用 Observable 和 HttpClient 实现 CRUD 方法的新方法的几个可用的 Angular 5 Typescript 文档，我想出了下一个代码，但仍然坚持显示来自 Web API 的数据:

这是我的模型:

export interface Value {
    id: number;
    name: string;
  }

我的服务:

export class ValueService {
  baseUrl = environment.apiUrl;

  constructor(private authHttp: HttpClient) {}

  getValues() {
    return this.authHttp
      .get<Value[]>(this.baseUrl + 'values', { observe: 'response'});
      // here my baseUrl is 'http://example.com/api/'
  }
}

我的组件:

@Component({
  selector: 'app-values',
  templateUrl: './values.component.html',
  styleUrls: ['./values.component.css']
})
export class ValuesComponent implements OnInit {

  values: Value[];

  constructor(private valueService: ValueService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.values = data['values'].result;
    });
  }
}

最后，我的模板:

<ul>
  <li>
    <div *ngFor="let value of values | async"> {{value.name}}</div>  
  </li>
</ul>

我的数据显示在带有 HTTP 200 结果的浏览器控制台中，但未显示在我的页面上，我缺少什么才能在我的页面上呈现它？

Answer 1

不确定您为什么调用 activatedRoute，因为它没有链接到您的 ValueService。您应该显式调用 valueService 来获取数据。

例如。在你的 ngOnInit()

this.valueService.getValues().subscribe(response=> {
   // get your data here
});

另请查看您的 ValueService.getValues()。这是一个在我们的项目中有效的简单实现。您可以稍后映射阵列。

return this.http.get(url)
  .map((res: any) => res.json())
  .catch(error => Observable.throw(error.json()));

顺便说一句。不确定你的异步过滤器是什么。它有什么作用？