Как отобразить данные Observable, которые я получаю от моего вызова API, используя Angular?

Question

Я очень плохо знаком с angular и пытаюсь получить простое приложение для отображения списка продуктов. Я вызываю API в функции TS getProducts (), которая возвращает наблюдаемое, которое представляет собой список продуктов с атрибутами title, artist, price и image_url. Я пытаюсь отобразить список названий продуктов на своей странице, но я изо всех сил пытаюсь получить заметное для отображения на странице HTML. Любая помощь из полезных ссылок будет потрясающей.

Вот мой TypeScript:

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();
    }
    function
    getProducts() {
        return this.api.get("Products")
          .map((response: Response) => {
            var result = response.json();
            return result;
          });
    }
}

Вот мой HTML-шаблон:

<h1>Products</h1>
<div layout="row">
    <li ngclass="product" *ngFor="let product of products">
        {{product.title | json}}
    </li>
</div>

Answer 1

Две проблемы в вашем коде:

1. Наблюдаемые выполняются, только если они подписаны (в вашем случае вы вызываете только map() - что добавляет шаг в конвейер, но фактически не вызывает выполнение наблюдаемой.

2. Вы никогда не назначаете значение для products.

Я не проверял это, но это может выглядеть примерно так:

export class AppComponent implements OnInit {
    products: Product[];

    constructor(private api: ApiService) {}  

    ngOnInit() {
        this.getProducts().subscribe(result: Product[] => this.products = result);
    }

    getProducts() {
        return this.api.get("Products")
          .map((response: Response) => {
            var result = response.json();
            return result;
          });
    }
}

• Я позволил себе применить некоторую типизацию к вашим свойствам (и предположил, что ваш запрос API возвращает список Product объектов - если это не так, просто удалите типы или замените их на any).

Answer 2

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

<div layout="row">
    <li ngclass="product" *ngFor="let product of getProducts() | asnyc">
        {{product.title | json}}
    </li>
</div>