Javascript 使用*ngIf-Angular2获取数据

我试图从我的web api中获取数据，以显示在html中。 我有一个组件用于列出事件，第二个组件用于详细事件

当我单击事件时，页面将路由到我的新url+id，但我在我的detailpage中没有得到任何信息。 ngIf应该在这里工作，listEvent组件工作正常

这就是我得到的：

eventDetail.html

<li *ngIf="Ievents">
{{event.id}}
<h2>works</h2>

事件列表

import 'rxjs/add/operator/switchMap';
import { Observable } from 'rxjs/Observable';
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

import { DataService, Ievents } from '../dataService';



 @Component({
   moduleId: module.id,
   selector: 'showevents',
   template: require('./showEvents.component.html'),
   styleUrls: ['./showEvents.component.css'],
   providers: [DataService]          
 })
 export class ShowEventsComponent implements OnInit {

   events: Observable<Ievents[]>;
   private selectedId: number;



   constructor(
     private service: DataService,
     private route: ActivatedRoute,
     private router: Router
   ) { }


   ngOnInit() {
     this.events = this.route.params
        .switchMap((params: Params) => {
            this.selectedId = +params['id'];
            return this.service.getEvents();
        });
   }

   isSelected(event: Ievents) {
     return event.id === this.selectedId;
   }

   onSelect(event: Ievents) {
     this.router.navigate(['/detail', event.id]);
   }

导入'rxjs/add/operator/switchMap'；
从“rxjs/Observable”导入{Observable}；
从“@angular/core”导入{Component，OnInit}；
从'@angular/Router'导入{Router，ActivatedRoute，Params}；
从'rxjs/Subscription'导入{Subscription}；
从“../DataService”导入{DataService，Ievents}；
@组成部分({
moduleId:module.id，
选择器：“showevents”，
模板：需要（'./showEvents.component.html'），
样式URL:['./showEvents.component.css']，
提供者：[数据服务]
})
导出类ShowEventsComponent实现OnInit{
事件：可观察；
private selectedId：数字；
建造师(
私有服务：数据服务，
专用路由：激活的路由，
专用路由器
) { }
恩戈尼尼特（）{
this.events=this.route.params
.switchMap（（参数：参数）=>{
this.selectedId=+params['id']；
返回此.service.getEvents（）；
});
}
isSelected（事件：Ievents）{
return event.id==this.selectedId；
}
onSelect（事件：Ievents）{
this.router.navigate（['/detail'，event.id]）；
}

eventList.html

<div class="container-fluid">
  <h2>Hendelser</h2>
  <ul class="events">
    <li *ngFor="let event of events | async"
        [class.selected]="isSelected(event)"
        (click)="onSelect(event)">
        <span class="badge">{{ event.id }}</span> {{ event.category.name }}
    </li>
  </ul>
</div>

亨德尔瑟


{{event.id}{{event.category.name}

DataService.ts

import { Http, Response, RequestOptions, Headers } from '@angular/http';
import 'rxjs/add/operator/map'
import { Observable, Subject } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/toPromise';





 @Injectable()
 export class DataService {

   constructor(private _http: Http) { }
   private RegenerateData = new Subject<number>();
   private actionUrl = 'http://localhost:53708/api/';


   getCategories(): Promise<Icategories[]> {
     return this._http.get(this.actionUrl + "categories")
        .toPromise()
        .then(response => this.extractArray(response))
        .catch(this.handleErrorPromise);
   }



   getEvents(): Promise<Ievents[]> {
     return this._http.get(this.actionUrl + "events")
        .toPromise()
        .then(response => this.extractArray(response))
        .catch(this.handleErrorPromise);
   }

   getEvent(id: number): Promise<Ievents> {
     const url = `${this.actionUrl + "events" }/${id}`;
     return this._http.get(url)
        .toPromise()
        .then(response => response.json().data as Ievents)
        .catch(this.handleErrorPromise);
   }


   Add(model) {
     let headers = new Headers({
        'Content-Type':
        'application/json; charset=utf-8'
     });
     let options = new RequestOptions({ headers: headers });
     delete model["id"];
     let body = JSON.stringify(model);
     return this._http.post(this.actionUrl + "events", body,
        options).toPromise().catch(this.handleErrorPromise);
   }





   protected extractArray(res: Response, showprogress: boolean = true) {
     let data = res.json();
     return data || [];
   }

   protected handleErrorPromise(error: any): Promise<void> {
     try {
        error = JSON.parse(error._body);
     } catch (e) {
     }

     let errMsg = error.errorMessage
        ? error.errorMessage
        : error.message
            ? error.message
            : error._body
                ? error._body
                : error.status
                    ? `${error.status} - ${error.statusText}`
                    : 'unknown server error';

     console.error(errMsg);
     return Promise.reject(errMsg);
   }
 }

 export interface Ievents {
   id: number,
   name: string,
   whathh: string,
   category: string,
   tlf: string
 }

 export interface Icategories {
   id: number;
   name: string;
 }

从'@angular/Http'导入{Http，Response，RequestOptions，Headers}；
导入“rxjs/add/operator/map”
从'rxjs/Rx'导入{可观察，主题}；
从“@angular/core”导入{Injectable}；
导入“rxjs/add/operator/toPromise”；
@可注射（）
导出类数据服务{
构造函数（私有http:http）{}
私有数据=新主题（）；
私有操作URL=http://localhost:53708/api/';
getCategories（）：承诺{
返回此。\u http.get（this.actionUrl+“categories”）
.toPromise（）
.then（response=>this.extractArray（response））
.接住（这只手如箭头所示）；
}
getEvents（）：承诺{
返回此。\u http.get（this.actionUrl+“事件”）
.toPromise（）
.then（response=>this.extractArray（response））
.接住（这只手如箭头所示）；
}
getEvent（id:number）：承诺{
常量url=`${this.actionUrl+“events”}/${id}`；
返回此。\u http.get（url）
.toPromise（）
.then（response=>response.json（）.data作为事件）
.接住（这只手如箭头所示）；
}
添加（模型）{
让标题=新标题({
“内容类型”：
'application/json；charset=utf-8'
});
let options=newrequestoptions（{headers:headers}）；
删除型号[“id”]；
让body=JSON.stringify（model）；
返回此。_http.post（this.actionUrl+“事件”，正文，
选项）。toPromise（）.catch（this.handleErrorPromise）；
}
受保护的extractArray（res:Response，showprogress:boolean=true）{
让data=res.json（）；
返回数据| |[]；
}
受保护的handleErrorPromise（错误：any）：承诺{
试一试{
error=JSON.parse（error.\u body）；
}捕获（e）{
}
让errMsg=error.errorMessage
？error.errorMessage
：error.message
？错误信息
：错误。\u正文
？错误。_体
：error.status
？`${error.status}-${error.statusText}`
：'未知服务器错误'；
控制台错误（errMsg）；
返回承诺。拒绝（errMsg）；
}
}
导出接口事件{
身份证号码：，
名称：string，
什么：弦，
类别：字符串，
tlf：字符串
}
导出接口{
id：编号；
名称：字符串；
}

您想检查组件变量

event

是否已设置，没有其他设置！：）

你也可以这样做：

{{event？.id}
作品

另一个提示：

ngOnInit（）：void{
这个.route.params
.switchMap（（params:params）=>this.dataService.getEvent（+params['id']））
.订阅（事件=>{
this.event=事件；
console.log（this.event）；//在这里打印它！
});
}

您到底期望什么？那么您的

事件

为空或未定义。

import { Http, Response, RequestOptions, Headers } from '@angular/http';
import 'rxjs/add/operator/map'
import { Observable, Subject } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/toPromise';





 @Injectable()
 export class DataService {

   constructor(private _http: Http) { }
   private RegenerateData = new Subject<number>();
   private actionUrl = 'http://localhost:53708/api/';


   getCategories(): Promise<Icategories[]> {
     return this._http.get(this.actionUrl + "categories")
        .toPromise()
        .then(response => this.extractArray(response))
        .catch(this.handleErrorPromise);
   }



   getEvents(): Promise<Ievents[]> {
     return this._http.get(this.actionUrl + "events")
        .toPromise()
        .then(response => this.extractArray(response))
        .catch(this.handleErrorPromise);
   }

   getEvent(id: number): Promise<Ievents> {
     const url = `${this.actionUrl + "events" }/${id}`;
     return this._http.get(url)
        .toPromise()
        .then(response => response.json().data as Ievents)
        .catch(this.handleErrorPromise);
   }


   Add(model) {
     let headers = new Headers({
        'Content-Type':
        'application/json; charset=utf-8'
     });
     let options = new RequestOptions({ headers: headers });
     delete model["id"];
     let body = JSON.stringify(model);
     return this._http.post(this.actionUrl + "events", body,
        options).toPromise().catch(this.handleErrorPromise);
   }





   protected extractArray(res: Response, showprogress: boolean = true) {
     let data = res.json();
     return data || [];
   }

   protected handleErrorPromise(error: any): Promise<void> {
     try {
        error = JSON.parse(error._body);
     } catch (e) {
     }

     let errMsg = error.errorMessage
        ? error.errorMessage
        : error.message
            ? error.message
            : error._body
                ? error._body
                : error.status
                    ? `${error.status} - ${error.statusText}`
                    : 'unknown server error';

     console.error(errMsg);
     return Promise.reject(errMsg);
   }
 }

 export interface Ievents {
   id: number,
   name: string,
   whathh: string,
   category: string,
   tlf: string
 }

 export interface Icategories {
   id: number;
   name: string;
 }