Javascript 角度5-HTTPClient+；可观察的+；显示数据

我正在尝试从我创建的返回的WP-restapi访问数据

然后，我尝试通过迭代器或类似

data[0]

的方法访问数据数组

我对Angular很陌生，尤其是Angular 5

我有一个模型：

export class Tool {
  id: string;
  acf: object;

  constructor(id: string, acf: object) {
    this.id = id;
    this.acf = acf;
  }
}

点击API的服务：

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs/Observable';

    import { Tool } from 'app/models/tool';
    import { environment } from 'environments/environment';

    @Injectable()
    export class ToolsService {
      constructor(private http: HttpClient) {}

      getAll(): Observable<Tool[]> {
        return this.http.get(<myUrl>)
      }
    }

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs/Observable”导入{Observable}；
从'app/models/Tool'导入{Tool}；
从“environments/environment”导入{environment}；
@可注射（）
导出类工具服务{
构造函数（私有http:HttpClient）{}
getAll（）：可观察{
返回这个.http.get（）
}
}

然后是一个组件：

    import { Component, OnInit } from '@angular/core';
    import { Observable } from 'rxjs/Observable';

    import { Tool } from 'app/models/tool';
    import { ToolsService } from 'app/services/tools.service';

    @Component({
      selector: 'app-tools-documentation',
      templateUrl: './tools-documentation.component.html',
      styleUrls: ['./tools-documentation.component.scss'],
      providers: [ToolsService]
    })
    export class ToolsDocumentationComponent implements OnInit {
      tools$: Observable<Tool[]>;

      constructor(private toolsService: ToolsService) {}

      ngOnInit() {
        this.tools$ = this.toolsService.getAll()
      }
    }

从'@angular/core'导入{Component，OnInit}；
从“rxjs/Observable”导入{Observable}；
从'app/models/Tool'导入{Tool}；
从“app/services/tools.service”导入{ToolsService}；
@组成部分({
选择器：“应用程序工具文档”，
templateUrl:'./tools documentation.component.html'，
样式URL:['./工具文档.component.scss']，
提供者：[工具服务]
})
导出类ToolsDocumentationComponent实现OnInit{
工具$：可观察的；
构造函数（专用工具服务：工具服务）{}
恩戈尼尼特（）{
this.tools$=this.toolsService.getAll（）
}
}

我可以通过以下方式在页面上显示$tools：

{{tools$| async | json}}

---

但是如果我尝试迭代它（或访问单个元素），我会在类型不匹配或可观察对象实际上不是数组的情况下出错。如何正确设置格式以访问此数据并在视图中对其进行迭代？我找到的每一个答案似乎都使用了旧的Angular 4做事方式，而没有使用HTTPClient。

问题不在于是使用

Http

还是

HTTPClient

---

要打开观察对象并循环：

{{{tool.id}}

，而且应该可以这样做：{{tool.id}}{{tools.length}}谢谢，我不正确地使用了AsyncPipe，您的两个答案结合起来正好满足了我的需要。