angulaire 2 liste ngui triables avec * ngFor

Question

Je suis en train de créer une liste triable dynamique Il fonctionne très bien quand il est statique, mais quand je suis en train de l'obtenir de la base, il n'est pas sortable

c'est mon code liste statique

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

et ce que je suis en train de faire

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

toute aide s'il vous plaît

Answer 1

Le * ngFor angulaire vous empêche de faire une chose pareille. Tant que vous ne mettez pas à jour le tableau menus situé dans le fichier component.ts, * ngFor conserve le rendu dans le même ordre. Vous devrez déclencher un événement lors de la publication d'un article <li> afin que l'ordre de votre tableau soit mis à jour.

Je vous suggère d'utiliser une autre bibliothèque telle que ng2-dnd. Jetez un oeil à l'exemple n ° 9 qui semble correspondre au comportement souhaité.

Answer 2

Il est fixé avec NG2-DND https://github.com/akserg/ng2-dnd ceci est mon code

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

et ceci est mon élément

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(); 
    } 
} 

et enfin c'est mon module

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

    ], 
    declarations: [ 
     ... 
     OrderMenuComponent, 


    ], 

    providers: [ 
     GestionMenuService 
    ] 

}) 
export class GestionMenuModule { }