HTML 不从获取请求中呈现数据答案

【问题标题】：HTML Not Rendering Data From Get RequestHTML 不从获取请求中呈现数据
【发布时间】：2020-11-17 20:06:05
【问题描述】：

我在 ngOnInit() 上加载数据


  ngOnInit(): void {
    this.http.get<any>(this.ROOT_URL + this.cookieService.get('cookie-name')).subscribe(
      function(res) {
        this.tableData = res.atVendor;
        console.log(this.tableData);
        this.ready = true;

      } ,
      (err) => console.log(err)
    )

我这样渲染数据：

<div *ngIf="ready">
    <ul><li *ngFor="let obj of tableData"> {{obj}}</li></ul>
</div>

我希望：将数组显示为列表。我得到了什么：没有渲染 - 没有错误。

我知道 API 调用正在工作，因为它显示为

console.log(this.tableData)

像这样：

0：“温泉” 1：“苹果” 2：“游戏站” 长度：3 原型：数组（0）

我认为问题仍然是页面在从调用中收集完数据之前正在呈现，所以我尝试使用 ready 和 *ngIf 但没有任何区别。

【问题讨论】：

您的控制台没有任何错误吗？

标签： angular

【解决方案1】：

您可以使用管道映射来执行您的逻辑并订阅 observable。我将 http 调用分离为自己的方法，因为这既干净又标准。这种方法应该映射 observable 的结果，而无需等待订阅。

 private getCookie(cookieName: string): Observable<any> {
     return this.http.get<any>(this.ROOT_URL + this.cookieService.get(cookieName))
       .pipe(catchError(err => console.error(error)))
 }

 ngOnInit(): void {
     this.getCookie("cookie-name")
      .pipe(map( res => {
          this.tableData = res.atVendor;
          console.log(this.tableData);
          this.ready = true;
      }));
      .subscribe();
)

【讨论】：