动态 RouterLink href 值正在更改，但 router-link 正确

Question

我有一个 ng-for 循环动态输出我的菜单类。第一次加载页面时，正确设置了 ng-reflect-router-link 和 ng-reflect-href。问题是在单击链接后，所有 ng-reflect-hrefs 都会更改为单击的任何链接。

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

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

sidebar-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>

在我点击一个链接后（couter 是我在下面的示例中点击的链接），这就是 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" 非常相似。 但我的链接显示正确，不像那个帖子。

Answer 1

我的问题是我的 json 对象定义了比我的 javascript 接口更多的属性。