node.js - Angular 2 *ngFor does not print to table , I am getting my information from a GET HTTP call and it works

Question

hello , plz i need a help my ngFor in angular2 does not print to table I am getting my information from a GET HTTP call and it works , if I do the *ngFor it does not display

this is my html

    <table class="table table-bordered">
      <thead>
        <tr>
          <td><b>Title</b></td>
          <td><b>url</b></td>
          <td><b>description</b></td>
          <td width="275" align="center"><b>Action</b></td>
        </tr>
      </thead>
      <tbody>  
         <tr *ngFor="let formation of formation" >
            <td>{{formation.title}}</td>
            <td>{{formation.url}}</td> 
            <td>{{formation.description}}</td>
            <td width="275"> 
                <a class="btn btn-info" href="">Detail</a> 
                <a class="btn btn-success" href="" >Edit</a>
                <a class="btn btn-danger" href="" >Delete</a>
            </td>
            </tr>

      </tbody>
    </table>

this is my service

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';
import 'rxjs/add/operator/map'; 


@Injectable()
export class FormationService {

  constructor(private http:Http) { }

  getFormations(){
    return this.http.get("http://localhost:3001/formations")
        .map(res => res.json());
  }

this is my formations.ts (schema dans un fichier ts)

export class Formation{
    title: string;
    url: string;
    description: string;
}

this is my route

const express = require('express');
const router = express.Router();
const Formation = require('../models/formations');
const mongoose = require('mongoose');
const config = require('../config/database');

   router.get('/', function(req, res){
                Formation.getFormations(function(err,formation){
                    if(err) throw err;
                    res.json(formation);
                });
            })

module.exports = router

;

this is my formation.models

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const config = require('../config/database');


var FormationSchema = new mongoose.Schema({
    title: String,
    url : String,
    description : String
},{
    versionKey : false
});




var Formation =  module.exports = mongoose.model('Formation', FormationSchema, 'Formations');
module.exports.getFormations = function(callback){
    Formation.find(callback);
}

Answer 1

you can use async pipe, you dont have to subscribe to your Observable,

component.ts:

export class FormationsComponent {
  formations: Observable<Formation[]>;
  constructor(private formationService: FormationService){};

  ngOnInit() {
     this.formations = this.formationService.getFormations();
   }
}

and in your html file

<tr *ngFor="let formation of formations | async" >