Question

我正在尝试从我创建的返回sample data的WP Rest API中访问数据。

我试图通过迭代器或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>)
      }
    }

然后是一个组件：

    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()
      }
    }

我可以通过以下方式在页面上显示$ tools： <pre>{{tools$ | async | json}}</pre>

但是如果我尝试迭代它（或访问单个元素），我会遇到不匹配的类型或Observable实际上不是数组的错误。如何正确格式化以访问此数据并在视图中迭代它？我找到的每个答案似乎都使用旧的Angular 4方式，并且不使用HTTPClient。

Answer 1

问题不在于您使用Http还是HttpClient。

要展开observable并循环遍历它：<div *ngFor="let tool of tools$ | async"> {{tool.id}}</div>

Angular 5 - HTTPClient + Observable +显示数据

1 个答案: