Как привязать данные из HttpClient в angular 6?

Question

Я использую этот метод для получения данных:

home.service.ts

getHomes(): Observable<HomeApi> {
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/x-www-form-urlencoded',
            'token': `${this.global.token}`
        })
    };
    return this.http.get<HomeApi>('url', httpOptions);
}

home.component.ts

ngOnInit() {
    this.service.getHomes().subscribe((res: HomeApi) => this.home = {
        images: res['images']
    });
}

home.component.html

<div *ngFor="let item of home.images">{{item.name}}</div>

Теперь item.name отлично работает, но в консоли выдает эту ошибку:

ОШИБКА TypeError: Невозможно прочитать свойство 'images' из неопределенного

Вот пример

Answer 1

Поскольку ваш getHomes вызов асинхронный , Angular пытается отобразить содержимое home.images до его назначения.После этого home.images назначается в вашем коде и запускает цикл обнаружения изменений, который заканчивается тем, что ваш *ngFor успешно работает.

Один из способов справиться с этим - использовать что-то вроде следующего:

<div *ngIf="home">
    <div *ngFor="let item of home.images">{{item.name}}</div>
</div>

Это просто гарантирует, что home не является undefined перед попыткой обработать *ngFor, что устранит ошибку консоли.

Другой вариант - использовать оператор безопасной навигации :

Оператор безопасной угловой навигации (?.) - это удобный и удобный способ защиты от нулевых и неопределенных значений в путях свойств.

Это так же просто, как добавить ? к home:

<div *ngFor="let item of home?.images">{{item.name}}</div>

Answer 2

Вы, вероятно, не инициализированы home.Таким образом, первый раз, когда вы инициализируете home, происходит здесь:

this.home = {
        images: res['images']
    }

До этого времени *ngFor ищет элементы в home объекте, который равен undefined до тех пор, пока не будет завершен асинхронный запрос и не инициализирована home.

Попробуйте инициализировать дом поверх вашего компонента: например, home: any = {};

Проверьте этот фрагмент, который демонстрирует, что это, вероятно, происходит.