角度2つのロードコンポーネント早すぎる

Question

私は角2持って、それは次のようにやや組み込まれて

app.component - そのうちの一つがデフォルトではない、いくつかのデータ・コンポーネント、である - いくつかのルートがあります最初に示されたルート。

some-data-component - アイテムを選択できるリストがあります。選択されている場合、選択したアイテムをデータ詳細コンポーネントに表示します。

事は、データ・ディテール・コンポーネントは、アプリケーションの開始時にロードされている - そしてそれは、HTML

だから、私は次のエラーを取得しています

未定義

のプロパティ「学生」を読み込めません

私はまだアイテムを選択していないため、これは、理にかなっているので、

を未定義する必要があり、それらが示されない限り、それはそれらの他のコンポーネントを構築しませんので、私は私のアプリを構築するための方法は何ですか？

これは私のコードです：

app.component

import { Component, OnInit } from '@angular/core'; 
import {Routes, Router, ROUTER_DIRECTIVES} from '@angular/router'; 

import { Dashboard } from './dashboard/dashboard.component'; 
import {SomeDataComponent} from './some-data-component/some-data-component'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app/components/app.component.html' 
    , directives: [ROUTER_DIRECTIVES] 
}) 
@Routes([ 
     { path: '/somedata', component: SomeDataComponent}, 
     { path: '/dashboard', component: Dashboard } 
]) 
export class AppComponent implements OnInit { 

    mobileView: number = 992; 
    toggle: boolean = false; 

    constructor(private router: Router) { 
     this.attachEvents(); 
    } 

    ngOnInit() { 
     this.router.navigate(['/dashboard']); 
    } 
} 

いくつかのデータ・コンポーネント

import {SomeDataListView} from '../some-data-list-view/some-data-list-view'; 
import {DataDetailComponent} from '../data-detail/data-detail.component'; 

import {SomeService} from '../../services/some_service';  

@Component({ 
    selector: 'some-data-component', 
    providers: [SomeService], 
    templateUrl: 'app/components/some-data/some-data.html', 
    directives: [SomeDataListView, DataDetailComponent] 
}) 
export class RoutesComponent { 
    data; 
    selectedData; 

    constructor(private someService: SomeService) { 
     this.data=[] 
    } 

    ngOnInit() { 
     this.data= this.SomeService.all(); 
    } 

    selectedRouteChanged(route) { 
     this.selectedRoute = route; 
    } 
} 

一部-Data.HTMLに

<rd-widget> 
 
    <rd-widget-body classes="medium no-padding"> 
 
     <div> 
 
      <img src="{{route.imgSrc}}" /> 
 
      <label>Neighborhood: {{route.name}}</label> 
 
      <div class="table-responsive"> 
 
       <table class="table"> 
 
        <thead> 
 
         <tr> 
 
          <th class="text-center">ID</th> 
 
          <th>Neighborhood</th> 
 
          <th>Status</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr *ngFor="let student of route.students" (click)="setSelected(route)"> 
 
          <td>{{student.id}}</td> 
 
          <td>{{student.neighborhood}}</td> 
 
          <td> 
 
           <span class="{{route.tooltipcls}}"> 
 
            <i class="fa {{route.icon}}"></i> 
 
           </span> 
 
          </td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </div> 
 
     </div> 
 
    </rd-widget-body> 
 
</rd-widget>

Answer 1

あなたはエルビス演算子使用することができます

<tr *ngFor="let student of route?.students" ...