Question

因此，当我尝试遍历每个api接收的数据时，会出现此错误：

找不到类型为“对象”的其他支持对象“ [对象对象]”。 > NgFor仅支持绑定到数组等Iterable。

这是我尝试遍历它的组件（ main.component.html ）：

<app-editform [toDo$]="todo" *ngFor="let todo of cs.$todos"></app-editform>

这是 main.component.ts 的构造函数：

import {ConfigService} from '../service/config.service';

constructor(public cs : ConfigService) { 
}

这是我的 config.service.ts 文件：

import {TodoService} from './todo.service';
import { Observable } from 'rxjs';

export class ConfigService {

    public $todos: Observable<TodoService[]>;

    constructor(private http:HttpClient) {
        this.getGlobalData();
    }

    public getGlobalData(): void {
        this.$todos = this.getToDoData();
    }

    public getToDoData(): Observable<TodoService[]> {
        return this.http.get<TodoService[]>(`${this.url}`);
    }
}

Answer 1

如您的错误所述。 Angular仅支持对数组进行迭代。

我认为您缺少| async来将可观察的内容转换回数组。

<app-editform [toDo$]="todo" *ngFor="let todo of cs.$todos | async"></app-editform>

Answer 2

您不能迭代到Observable。您应该订阅它以恢复TodoService的数组。尝试类似的事情：

public $todos :TodoService[];

// ..

public getGlobalData() {
    this.getToDoData().subscribe(result => this.$todos = result);
}

或者您可以在您的html中使用Observable将async直接转换为数组：

<app-editform [toDo$]="todo" *ngFor="let todo of (cs.$todos | async)"></app-editform>

如何遍历每个API收到的数据

2 个答案: