Получите данные из API и выполните итерацию в Angular2 - PullRequest
Новая
       7

Получите данные из API и выполните итерацию в Angular2

0 голосов
/ 07 мая 2018

Я новичок в 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.log(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 ]

0 голосов
/ 07 мая 2018

Проблема в вашей наблюдаемой. 

ngOnInit() {
    this.getProducts();
}

getProducts() {
    this.products = this.api.get('http:/api/products').map((res:Response) => res.json());
    console.log(this.products);
}

необходимо изменить на: 

ngOnInit() {
    this.getProducts().subscribe(data => this.products = data);
}

getProducts() {
    return this.api.get('http:/api/products').map((res:Response) => res.json());
}
0 голосов
/ 07 мая 2018

Ваш код: 

getProducts() {
    this.products = this.api.get('http:/api/products').map((res:Response) => res.json());
    console.log(this.products);
}

Измените его на: (Больше не нужно добавлять импорт) 

getProducts() {
        this.api.get('http:/api/products').toPromise()
            .then(response => {
                let data = response.json();
                this.products = data;
        console.log(this.products);
       })
        .catch(error => {
       })
 }
0 голосов
/ 07 мая 2018

Вы забыли подписаться на наблюдаемое.

Пожалуйста, измените 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.

...