Question

我对angular还是很陌生，我正在尝试使用一个简单的App来显示产品列表。我在TS getProducts（）函数中调用了一个api，该API返回一个observable，它是具有标题，艺术家，价格和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

您从getProducts返回的值是Observable类型的，您必须这样对待。试试：

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

Answer 2

代码中的两个问题：

可观察对象只有在已订阅的情况下才执行（在您的情况下，您仅调用map()-这会增加一个步骤，但实际上并不会触发可观察对象的执行。
您永远不会为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个对象的列表-如果不是，则只需删除类型或将其替换为{{1 }}。

如何显示使用Angular从api调用中获取的Observable数据？

2 个答案: