从 API 获取数据并在 Angular2 中迭代

Question

我是 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>

没有显示输出。我的代码有什么优点？

Answer 1

您忘记订阅 observable。

请更改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 = index 中的 i，请考虑将其删除以使代码更简单。

编辑：还在组件 private subscription: Subscription 中添加一个新的属性并从 RxJS 导入 Subscription。稍后不要忘记在 ngOnDestroy 或 this.products = data;.

之后退订

假设 private api: ApiService 在内部调用 http Angular 服务。

或者更改模板 let product of products | async 并保持 typescript 代码原样不变。 | async 将订阅可观察的产品并自动取消订阅。另外 {{ product.title } 是正确的语法，不是 products.

Answer 2

问题出在您的 observable 中。

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());
}

Answer 3

您的代码：

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 => {
       })
 }

从 API 获取数据并在 Angular2 中迭代

Get data from API and iterate over in Angular2

angular2-routing

angular