我的md-tab-nav-bar是空的

Question

我正在嘗試使用Angular的Material Design實現動態導航欄。 不過，我似乎無法弄清楚爲什麼它不正確顯示.. 截圖：http://prntscr.com/fv9l2i 可能有人幫我找出我在哪裏搞亂？

navBar.comp.html：

<nav md-tab-nav-bar> 
     <a md-tab-link 
     *ngFor="let link of navLinks" 
     [routerLink]="navLinks.link" 
     routerLinkActive #rla="routerLinkActive" 
     [active]="rla.isActive"> 
     {{navLinks.label}} 
     </a> 
    </nav> 

    <router-outlet></router-outlet> 
    Current Area: 
    Fun &nbsp;<md-slide-toggle 
    class="example-margin" 
    [color]="color" 
    [checked]="checked" 
    (change)="onChange($event)">Information</md-slide-toggle> 

navBar.comp.ts

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

    @Injectable() 
    @Component({ 
     selector: 'nav-Bar', 
     templateUrl: 'navBar.component.html' 
    }) 

    export class NavBarComponent implements OnInit { 

     navLinks: any[]; 
     activeLinkIndex = 0; 
     constructor(private router: Router) { 
      this.navLinks = [ 
      {label: 'Profile', link: '/profile/', index: '0'}, 
      {label: 'Notification', link: '/notifications/', index: '1'}, 
      {label: 'Home', link: '', index: '3'}, 
      {label: 'My Cards', link: '/cards/', index: '4'}, 
      {label: 'Create a Card', link: '/post/', index: '5'}, 
      {label: 'Logout', link: '/login/', index: '6'}, 
     ]; 
     } 

     ngOnInit() { 
      // get posts from secure api end point 
     // this.profileService.getUser() 
     //  .subscribe(author => { 
     //   this.author = author; 
      //  }); 
     } 
    } 

app.routing.ts

import { Routes, RouterModule } from '@angular/router'; 
    import { LoginComponent } from './login/index'; 
    import { HomeComponent } from './home/index'; 
    import { ProfileComponent } from './profile/index'; 
    import { CreatePostComponent } from './createPost/index'; 
    import { UserPostsComponent } from './userposts/index'; 
    import { RegisterComponent } from './register/index'; 
    import { NotificationComponent } from './notification/index'; 
    import { NavBarComponent } from './navBar/index'; 
    import { AuthGuard } from './_guards/index'; 

    const appRoutes: Routes = [ 
     { path: 'login', component: LoginComponent }, 
     { path: 'register', component: RegisterComponent }, 
     { path: '', component: HomeComponent, canActivate: [AuthGuard] }, 
     { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] }, 
     { path: 'post', component: CreatePostComponent, canActivate: [AuthGuard] }, 
     { path: 'cards', component: UserPostsComponent, canActivate: [AuthGuard] }, 
     { path: 'notifications', component: NotificationComponent, canActivate: [AuthGuard] }, 
     // otherwise redirect to home 
     { path: '**', redirectTo: '' } 
    ]; 

    export const routing = RouterModule.forRoot(appRoutes); 

Answer 1

您應該使用{{link.label}}代替{{navLinks.label}}

您應該更新[routerLink]="navLinks.link"到[routerLink]="link.link"