Как мне использовать ngFor с Observable в Angular? - PullRequest
Новая
       22

Как мне использовать ngFor с Observable в Angular?

0 голосов
/ 14 октября 2018

У меня проблемы с передачей данных из моей наблюдаемой с использованием * ngFor.

У меня следующий вызов в моей службе данных: 

    completedTasks(): Observable<Array<Todo>> {
       return this.aHttpService.get<Array<Todo>>(
              'http://localhost:3000/todos?complete=true');
    }

Затем у меня есть это свойство, чтобы получитьdata: 

  get completedTodos(): Observable<Array<Todo>> {
     return this.todoDataService.completedTasks();
  }

Затем я использую следующий HTML-код для вывода данных: 

 <li *ngFor="let todo of completedTodos | async" >
   ... stuff here
 </li>

Однако, хотя я вижу через Postman, что в вызове API есть JSON,ничего не появляется в моем списке.

Я бы с радостью вызвал completedTasks вернуть массив, если бы мог выяснить, как преобразовать наблюдаемое в массив (если это даже имеет смысл ....)

Обновление:

Я изменил код, который действительно имел completedTasks вместо completedTodos (спасибо), и теперь я получаю:

enter image description here

Ответы [ 2 ]

0 голосов
/ 14 октября 2018

Ваш код в основном правильный.Вот рабочий пример для StackBlitz , который выводит массив объектов Observable.

Единственное, что я сделал по-другому - назначил completedTodos в качестве свойства модели представления во время ngOnInit().Это предотвращает создание наблюдаемого в каждом цикле обнаружения изменений.

В качестве альтернативы, если вы хотите использовать метод получения, вы можете использовать ChangeDetectionStrategy OnPush.

[Update]

Я изменил пример кода, чтобы получить список задач: https://jsonplaceholder.typicode.com/, чтобы он выполнял фактический запрос GET.

0 голосов
/ 14 октября 2018

Вам нужно подписаться на наблюдаемое, чтобы получить от него какие-либо данные.

...