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

【问题标题】：Angular 2 ngui-sortable list with *ngFor带有 *ngFor 的 Angular 2 ngui 可排序列表
【发布时间】：2023-03-27 13:22:02
【问题描述】：

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

这是我的静态列表代码

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

请帮忙

【问题讨论】：

标签： angular ngfor

【解决方案1】：

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

我建议您使用另一个库，例如 ng2-dnd。看一下看起来符合预期行为的示例 n°9。

【讨论】：

【解决方案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 { }

【讨论】：