angular2的导航栏未正确显示

Question

    <div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
            <a class='navbar-brand' [routerLink]="['/home']">Angular</a>
        </div>
        <div class='clearfix'></div>
        <div class='navbar-collapse collapse'>
            <ul class='nav navbar-nav'>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/home']">
                        <span class='glyphicon glyphicon-home'></span> Home
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/counter']">
                        <span class='glyphicon glyphicon-education'></span> Counter
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/fetch-data']">
                        <span class='glyphicon glyphicon-th-list'></span> Fetch data
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/margin']">
                        <span class='glyphicon glyphicon-th-list'></span> MarginReport
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>



    import { Component } from '@angular/core';
    import { MarginServcies } from '../../services/MarginService';
    import { Response } from '@angular/http';  
    import { Http } from '@angular/http';

    @Component({
        selector: 'margin',
        template: require('./margin.component.html')
    })
    export class MarginComponent {
        //public MarginList = [];
        //public constructor(private marginService: MarginServcies) {
        //    this.marginService.getMargin()
        //        .subscribe(
        //        (data: Response) => (this.MarginList = data.json())
        //        );
        public margin : Margin;

        constructor(http: Http) {
            http.get('http://localhost:2213/api/margin').subscribe(result => {
                this.margin = result.json();
            });
        }
    }

    interface Margin {
        AccountID: string;
        AsOfDate: Date;
        MarginType: string;
        DelivType: string;
        FedCall: number;
        MaintenanceCall: number;
        DayTradingCall: number;
        HouseCall: number;
        RegT_CallBalance: number;
        Equity: number;
        CashAvailable: number;
        DayTradingBuyingPower: number;
        PMA_Excess: number;
        AccountStatus: string;
        Company: string;

    }



    <h1>Margin</h1>
    <margin>

        <script type="text/ng-template">
            <!--<div class="panel panel-info">
                <div class="panel-body">-->
            <h3>Margin Call From Last Night</h3>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>AccountID</th>
                            <th>AsOfDate</th>
                            <th>MarginType</th>
                            <th>DelivType</th>
                            <th>FedCall</th>
                            <th>MaintenanceCall</th>
                            <th>DayTradingCall</th>
                            <th>HouseCall</th>
                            <th>RegT_CallBalance</th>
                            <th>Equity</th>
                            <th>CashAvailable</th>
                            <th>DayTradingBuyingPower</th>
                            <th>PMA_Excess</th>
                            <th>AccountStatus</th>
                            <th>Company</th>
                        </tr>
                    </thead>
                    <tbody>

                        <tr *ngFor="let marginData of MarginList; let i = index; trackBy: AccountID">
                            <td>
                                {{i+1}}
                            </td>
                            <td>{{marginData.AccountID}}</td>
                            <td>{{marginData.AsOfDate}}</td>
                            <td>{{marginData.MarginType}}</td>
                            <td>{{marginData.DelivType}}</td>
                            <td>{{marginData.FedCall}}</td>
                            <td>{{marginData.MaintenanceCall}}</td>
                            <td>{{marginData.DayTradingCall}}</td>
                            <td>{{marginData.HouseCall}}</td>
                            <td>{{marginData.RegT_CallBalance}}</td>
                            <td>{{marginData.Equity}}</td>
                            <td>{{marginData.CashAvailable}}</td>
                            <td>{{marginData.DayTradingBuyingPower}}</td>
                            <td>{{marginData.PMA_Excess}}</td>
                            <td>{{marginData.AccountStatus}}</td>
                            <td>{{marginData.Company}}</td>
                            <td>


                                <a class="btn btn-danger">
                                    Delete
                                </a>
                            </td>
                        </tr>

                </table>
            </div>
        </script>
        <!--define the table here-->


    </margin>

嗨，上面是我的导航条形码。并且MarginReport部分没有显示出来。我不知道为什么。我的角度应用程序也有一个margin.component.ts。 我不确定是否是路由问题。我希望导航栏显示主页，fetchdata，计数器和保证金报告。

任何人都可以帮助我吗？