Получить данные из API и перебрать в Angular2
Я новичок в Angular2 и пытаюсь выполнить простую задачу, но, похоже, это не работает.
Это мой файл TS
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
products;
constructor(private api: ApiService) {}
ngOnInit() {
this.getProducts();
}
getProducts() {
this.products = this.api.get('http:/api/products').map((res:Response) => res.json());
console.info(this.products);
}
}
Но когда я пытаюсь повторить итерацию в html файле вот так.
<h1>Products</h1>
<div layout = "row">
<!-- List the products using the class "products" -->
<div *ngFor = "#product of products ; #i = index" class = "products">{{ products.title }}</div>
</div>
Вывод не отображается. Что сильного в моем коде?
Ответы 3
Вы забыли подписаться на наблюдаемое.
Пожалуйста, замените this.products = this.api.get('http:/api/products').map((res:Response) => res.json());
к
this.subscription = this.api.get('http:/api/products').map((res:Response) => res.json()).subscribe(data => this.products = data);
Также рассмотрите возможность замены #product of products ; #i = index на let product of products" в большинстве примеров, в руководствах используется let. Если вы не используете i из #i = index позже в коде, рассмотрите возможность его удаления, чтобы код был более простым.
Обновлено: Также добавьте новое свойство в компонент private subscription: Subscription и импортируйте Subscription из RxJS. Позже не забудьте отказаться от подписки на ngOnDestroy или после this.products = data;.
Предполагая, что private api: ApiService вызывает внутреннюю службу http Angular.
Или перейдите на шаблон let product of products | async и сохраните код машинописного текста в том виде, в котором он был изначально, без изменений. | async подпишется на наблюдаемые продукты и откажется от подписки автоматически. Также {{ product.title } - правильный синтаксис, а нет - products.
Я получаю эту ошибку Property 'subscription' does not exist on type 'AppComponent'.
пожалуйста, добавьте subscription, как я уже упоминал в ответе в строке products;
Я не могу добавить подписку. Я должен использовать все, что написал.
@AliRasheed: Вы сказали, что должны использовать то, что у вас есть. Мне интересно, как это работает, если вы не импортировали «Ответ» ... См. Мой ответ ниже
Привет, @AliRasheed, я редактирую свой ответ. Я предполагаю, что это упражнение / тест, и вы не можете много редактировать. Пожалуйста, прочтите еще немного официальную документацию по angular, потому что есть примеры для таких простых вещей.
привет @AliRasheed, примите любой ответ, который сработал для вас, или оставьте отзыв.
Я бы поддержал любой ответ, но во всех них чего-то не хватает -> {{ products.title }}, это неправильно, и это должен быть {{ product.title }}. в любом случае :)
Извините, в прошлый раз я согласился, но думаю, что возникла проблема с сетью
Проблема в вашем наблюдаемом.
ngOnInit() {
this.getProducts();
}
getProducts() {
this.products = this.api.get('http:/api/products').map((res:Response) => res.json());
console.info(this.products);
}
необходимо изменить на:
ngOnInit() {
this.getProducts().subscribe(data => this.products = data);
}
getProducts() {
return this.api.get('http:/api/products').map((res:Response) => res.json());
}
Ваш код:
getProducts() {
this.products = this.api.get('http:/api/products').map((res:Response) => res.json());
console.info(this.products);
}
Измените его на: (Больше не нужно добавлять импорт)
getProducts() {
this.api.get('http:/api/products').toPromise()
.then(response => {
let data = response.json();
this.products = data;
console.info(this.products);
})
.catch(error => {
})
}
Это сработало для вас?