问Angular 2 ngui-带*ngFor的可排序列表

EN

<div class="row">
    <div class="col-sm-3">
        <div class="panel panel-success">
            <div class="panel-heading">
                 Menus
            </div>
            <div class="panel-body">
                <ul class="list-group" dnd-sortable-container [sortableData]="menus">
                    <li style="color:blue;" *ngFor="let menu of menus; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{menu.title}}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-body">
                My prefences:<br/>
                <span *ngFor="let menu of menus; let i = index">{{i + 1}}) {{menu.title}}<br/></span>
            </div>
        </div>
    </div>
</div>

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {GestionMenu} from "./gestionmenu";
import {GestionMenuService} from "./gestionmenu.service";
import {TreeModel} from "ng2-tree/index";
@Component({
    selector: 'order-menu',
    templateUrl: './order-menu.component.html',
    styleUrls: ['./order-menu.component.css']

})
export class OrderMenuComponent implements OnInit  {
    menus: GestionMenu[];
    menu: GestionMenu;

    constructor(
        private router: Router,
        private menuService: GestionMenuService) { }


    getMenus(): void {
        this.menuService.getMenus()
            .subscribe(
                menus => this.menus = menus, //Bind to view
                err => {
                    // Log errors if any
                    console.log(err);
                }
            );
    }

    ngOnInit(): void {
        this.getMenus();
    }
}

@NgModule({
    imports: [
        ...
        DndModule.forRoot()

    ],
    declarations: [
       ...
       OrderMenuComponent,


    ],

    providers: [
        GestionMenuService
    ]

})
export class GestionMenuModule { }