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

角度* ngFor可以防止你做这样的事情。只要您不更新component.ts文件中的<activity android:name=".ActivitePrincipale"> .... </activity>数组，* ngFor将以相同的顺序继续呈现。您需要在发布menus项时触发事件，以便更新阵列的顺序。

我建议您使用其他库，例如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 ngui-sortable list with * ngFor

2 个答案: