使用* ngIf获取数据-Angular2

Question

I'm trying to get data i have fetched from my web-api, to show in my html. I have one component for listing events and second for detail event.

when i click the event, the page routes to my new url+id, but i get noting in my detailpage. ngIf is supposed to work here, and the listEvent component works just fine.

This is what i get: detailEvent

eventDetail.html

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

eventDetail.ts

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

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

@Component({
  moduleId: module.id,
  selector: 'event-detail',
  templateUrl: './eventDetail.component.html',
  styleUrls: ['./eventDetail.component.css']
})
export class EventDetailComponent implements OnInit {
  event: Ievents;

  constructor(
    private dataService: DataService,
    private route: ActivatedRoute,
    private location: Location
  ) { }

  ngOnInit(): void {
    this.route.params
        .switchMap((params: Params) => this.dataService.getEvent(+params['id']))
        .subscribe(event => this.event = event);
    console.log(this.event);
  }

}

eventsList.ts

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

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>

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

Answer 1

<li *ngIf="event">

You want to check if your component variable event is set, nothing else! :)

You could do it also like this:

<li>
{{event?.id}}
<h2>works</h2>

Another hint:

  ngOnInit(): void {
    this.route.params
        .switchMap((params: Params) => this.dataService.getEvent(+params['id']))
        .subscribe(event => {
           this.event = event;
           console.log(this.event); // print it here !
        });

  }