2016-08-08 44 views
1

我有一個ng-for循環動態輸出我的菜單類。第一次加載頁面時,ng-reflect-router-link和ng-reflect-href被正確設置。問題在於點擊鏈接之後,所有ng-reflect-hrefs都會更改爲所點擊的鏈接。動態RouterLink href值正在改變,但路由器鏈接是正確的

routes.ts

import { RouterConfig } from '@angular/router'; 
import { Home } from './views/home/home'; 
import { FetchData } from './components/fetch-data/fetch-data'; 
import { Counter } from './components/counter/counter'; 

export const routes: RouterConfig = [ 

    { path: 'home', component: Home }, 
    { path: 'counter', component: Counter }, 
    { path: 'fetch-data', component: FetchData } 
]; 

側邊欄-menu.ts

import * as ng from '@angular/core'; 
import {ROUTER_DIRECTIVES, Http} from './index.ts' 

@ng.Component({ 
    selector: 'sidebar-menu', 
    template: require('./sidebar-menu.html'), 
    directives: [...ROUTER_DIRECTIVES] 
}) 
export class SidebarMenu { 
    public menus: Menu[]; 
    constructor(http: Http) { 
     //todo - put this in a service.ts 
     http.get('/api/Menu/Menus').subscribe(result => { 
      this.menus = result.json(); 
     }); 
    } 


} 

menu.ts

interface Menu { 
    name: string; 
    decorator: string; 
} 

側邊欄menu.html

<ul>  
<li *ngFor="#menu of menus" > 
<a [routerLink]="menu.name"> 
      <span class='glyphicon glyphicon-th-list {{menu.decorator}}'></span> {{menu.name}}</a> 
/li> 
</ul> 

後,我點擊一個鏈接(種臺是我在下面的例子中點擊了鏈接),這是HTML的樣子:

<ul class="nav navbar-sidebar"> 

     <!--template bindings={ 
    "ng-reflect-ng-for-of": "[object Object],[object Object]" 
}--><li> 
      <a ng-reflect-router-link="counter" ng-reflect-href="/counter" href="/counter"> 
       <span ng-reflect-class-name="glyphicon glyphicon-th-list " class="glyphicon glyphicon-th-list " classname="glyphicon glyphicon-th-list "></span> counter 
      </a> 
     </li><li> 
      <a ng-reflect-router-link="fetch-data" ng-reflect-href="/counter" href="/counter"> 
       <span ng-reflect-class-name="glyphicon glyphicon-th-list " class="glyphicon glyphicon-th-list " classname="glyphicon glyphicon-th-list "></span> fetch-data 
      </a> 
     </li> 
     </ul> 

我的項目是設置與Dynamic routerLink value from ngFor item giving error "Got interpolation ({{}}) where expression was expected"非常相似。 但我的鏈接顯示正確,不像那篇文章。

+0

鏈接正在尋找正確並不意味着它是正確的,你的控制檯說一下嗎? –

+0

控制檯中沒有錯誤。當我登錄這個菜單時,它看起來應該是這樣。 – crh225

+0

菜單中的名稱是什麼?你能分享這段代碼嗎? –

回答

0

我的問題是我的json對象有更多的屬性定義比我的JavaScript界面​​。

Menu object

相關問題