Angular 2 个带有 *ngFor 的 ngui 可排序列表

Question

我正在尝试创建一个动态可排序列表它在静态时工作正常但是当我试图从基础中获取它时它变得不可排序

这是我的静态列表代码

<ul ngui-sortable>
    <li >Order</li>
    <li> Me</li>
    <li >Right</li>
    <li id="the">The</li>
    <li id="into">Into</li>
    <li id="put">Put</li>
</ul>

这就是我想要做的

<ul ngui-sortable  >
    <li *ngFor="let menu of menus">{{menu.title}}</li>
</ul>

请帮忙

Answer 1

angular *ngFor 阻止你做这样的事情。只要您不更新位于 component.ts 文件中的 menus 数组，*ngFor 就会保持相同的渲染顺序。您需要在释放 <li> 项目时触发一个事件，以便您的数组顺序得到更新。

我建议您使用另一个库，例如 ng2-dnd。看一下似乎符合所需行为的示例 n°9。

Answer 2

已通过 ng2-dnd 修复 https://github.com/akserg/ng2-dnd 这是我的代码

<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 { }

Angular 2 个带有 *ngFor 的 ngui 可排序列表

Angular 2 ngui-sortable list with *ngFor

ngfor

angular