我正在尝试从我创建的返回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。
问题不在于你是否使用Http
或HttpClient
。
打开可观察量并循环通过它:<div *ngFor="let tool of tools$ | async"> {{tool.id}}</div>