当我完成一个功能来查看已添加的编队的详细信息时，我使用了 Angular 2，但没有显示任何内容

当我完成一个功能以查看已添加的编队的详细信息时，什么也没有显示。

错误

GET http://localhost:3001/formations/undefined 0 ()

例外：响应状态：0 表示 URL：空

Subscriber.js:246 Uncaught Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers, ...}

这是我的show.html

<div class="panel panel-default" >
  <div class="panel-heading">formation detail Form : You can see the detail information of an foration in this page of the EMS Apps.</div>
  <div class="panel-body">
    <form class="form-horizontal" *ngIf=forms>
  <div class="form-group">
    <label for="emp_name" class="col-sm-2 control-label">formation's Full title : </label>
    <div class="col-sm-9">
      <p class="form-control">{{forms.title}}</p> 
    </div>
  </div>
  <div class="form-group">
    <label for="position" class="col-sm-2 control-label">formation url : </label>
    <div class="col-sm-9">
     <p class="form-control">{{forms.url}}</p>
    </div>
  </div>
  <div class="form-group">
    <label for="department" class="col-sm-2 control-label">formation description : </label>
    <div class="col-sm-9">
     <p class="form-control">{{forms.description}}</p>
    </div>
  </div>

</form>

  </div>
</div>

这是我的节目.ts

import { Component, OnInit } from '@angular/core';
import { FormationService } from '../../services/formation.service';
import { Formation } from '../../../app/formation';
import { ActivatedRoute, Params, Router } from '@angular/router';

@Component({
  selector: 'app-show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.css']
})
export class ShowComponent implements OnInit {


  constructor(
    public formationService:FormationService,
    public route:ActivatedRoute,
    public router:Router
  ) { }

  ngOnInit() {
    this.getFormation();
  }

  formation:Formation;
  getFormation(){
    var id = this.route.snapshot.params['id'];
    this.formationService.getFormation(id)
        .subscribe(formation=>{
          this.formation = formation;
        })
  }

}

这是我的家.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 forms of formation  | async " >
        <td>{{forms.title}}</td>
        <td>{{forms.url}}</td> 
        <td>{{forms.description}}</td>
        <td width="275"> 
            <a class="btn btn-info" routerLink="/show/{{forms._id}}">Detail</a> 
            <a class="btn btn-success" routerLink="/edit/{{forms._id}}" >Edit</a>
            <a class="btn btn-danger" (click)="deleteFormation(forms._id)" >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());
  }
  addFormation(info){
    return this.http.post("http://localhost:3001/formations",info)
        .map(res => res.json());
  }
  getFormation(id){
    return this.http.get("http://localhost:3001/formations/"+id)
        .map(res => res.json());
  }
  deleteFormation(id){
    return this.http.delete("http://localhost:3001/formations/"+id)
        .map(res => res.json());
  }
  updateFormation(id, info){
    return this.http.put("http://localhost:3001/formations/"+id,info)
        .map(res => res.json());
  }

}