Angular table 的 Http 获取方法

Question

我是 angular 的新手，正在尝试弄清楚它是如何工作的。我正在尝试从 API 中为我的 table.

提取数据

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map'; 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
class AppComponent {
  people: any;
  constructor(http: Http) {
    http.get('https://jsonplaceholder.typicode.com/todos')
      .map(res => res.json())
      .subscribe(people => this.people = people);
  }
}

interface people {
  userId:number;
  id:number;
  title:string;
  completed:boolean;

而这个 Html 代码块

<tr *NgFor="let people of peoples">
              <td>{{people.userId}}</td>
              <td>{{people.id}}</td>
              <td>{{people.title}}</td>
              <td>{{people.completed}}</td>

我哪里做错了？任何建议都非常有帮助。

Answer 1

你拼错了指令，它是 *ngFor，而且你试图引用一个名为 peoples 的变量，这个变量不存在，因为在你命名为 people 的组件中。

以后检查控制台有没有错误，你也应该多看看，因为你的代码有很多不好的做法。尝试使用服务并将您的 http 请求放在那里，然后简单地将它们注入您的组件。

Angular table 的 Http 获取方法

Angular Http get method for table

api

angular-http

angular