Angular 2 *ngFor 不打印到 table ，我从 GET HTTP 调用中获取我的信息并且它有效

Question

你好，我需要帮助我在 angular2 中的 ngFor 没有打印到 table 我正在从 GET HTTP 调用中获取我的信息并且它有效，如果我执行 *ngFor 它不显示

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

这是我的服务

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

这是我的formations.ts（schema dans un fichier ts）

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

这是我的路线

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

;

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

Try to change the name in the table you had given let formation of formation instead give as forms of formation and try it

<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 forms of formation" >
        <td>{{forms.title}}</td>
        <td>{{forms.url}}</td> 
        <td>{{forms.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>

OR if it doesn't help you try below method

in component.ts

export class ContactComponent implements OnInit{   
ContactList: any[];

constructor(  private http: HttpClient){}



addContacts(){
   this.http.get("yourApiHere")
   .subscribe((contacts: any) => {
    this.ContactList = contacts;
    console.log(this.ContactList);
});
}


    ngOnInit(){
      this.addContacts();
    }

in component.html

                    <div class="table100-head" >
                      <table>
                        <thead>
                          <tr class="row100 head">
                            <th class="cell100 column1">Name</th>
                            <th class="cell100 column2">Email</th>
                            <th class="cell100 column3">Phone Number</th>                    
                          </tr>
                        </thead>
                      </table>
                </div>

                <div class="table100-body js-pscroll">
                    <table>
                        <tbody>
                          <tr class="row100 body" *ngFor="let list of contactList">
                            <td class="cell100 column1" >{{list.name}}</td>
                            <td class="cell100 column2">{{list.email}}</td>
                            <td class="cell100 column3">{{list.phone}}</td>

                          </tr>               
                        </tbody>
                    </table>
                </div>

Answer 2

你可以使用异步管道，你不必订阅 Observable，

component.ts:

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

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

并在您的 html 文件中

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

Angular 2 *ngFor 不打印到 table ，我从 GET HTTP 调用中获取我的信息并且它有效

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

node.js

ngfor

angular