Angulaire Http obtenir la méthode pour la table

Question

Je suis nouveau à angulaire et essaie de comprendre comment cela fonctionne. J'essaie d'extraire des données de l'API pour ma 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; 

Et ce Html code-block

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

où je fais mal? Tout conseil très utile.

Answer 1

Vous avez incorrectement orthographié la directive, c'est * ngFor, et vous essayez également de référencer une variable nommée peoples, qui n'existe pas car dans le composant vous l'avez nommé people.

Vérifiez la console pour les erreurs dans le futur, et vous devriez également lire plus parce que votre code a beaucoup de mauvaises pratiques. Essayez d'utiliser les services et mettez vos demandes http là et simplement les injecter dans vos composants.