Как пройти через мои данные, которые я получаю за API

Question

Поэтому, когда я пытаюсь перебрать данные, которые я получаю за API, я получаю эту ошибку:

Невозможно найти отличающийся поддерживающий объект '[object Object]' типа 'object'. > NgFor поддерживает только привязку к итерациям, таким как массивы.

Вот мой компонент, в котором я пытаюсь пройти через него ( 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 file:

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

Вы не можете перейти к Observable. Вы должны подписаться на него, чтобы восстановить массив из TodoService. Попробуйте что-то вроде этого:

public $todos :TodoService[];

// ..

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

Или вы можете напрямую преобразовать Observable в массив, используя async в html:

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

Answer 2

Как говорит ваша ошибка. Angular поддерживает только перебор массивов.

Я думаю, что вам не хватает | async для преобразования вашей наблюдаемой обратно в массив.

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