如何创建未知数量的bs-sortable元素？ Angular 4 ngx-bootstrap

Question

是否有可能以某种方式使用*ngFor创建bs-sortable元素？当我尝试这个（下面的代码）时，浏览器中的整个页面冻结。

我想创建一个未知数量的可排序元素。它们之间可以分类。

我正在使用Angular 4，ngx-bootstrap，bootstrap 4，angularCLI

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: string[][] = [
    [
      'Windstorm',
      'Bombasto',
      'Magneta',
      'Tornado'
    ],
    [
      'Mr. O',
      'Tomato',
      'Ketchup'
    ]
  ];
}

app.component.html

<div *ngFor="let item of items; let i = index">
  <bs-sortable
    [(ngModel)]="items[i]"
    itemClass="sortable-item"
    itemActiveClass="sortable-item-active"
    placeholderItem="Drag here"
    placeholderClass="placeholderStyle"
    wrapperClass="sortable-wrapper"
  ></bs-sortable>
  <pre>model: {{ items[i] | json }}</pre>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SortableModule } from 'ngx-bootstrap/sortable';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    SortableModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您可以创建bs-sortable元素的数量。但是你给[[ngModel]]的列表不应该有相同的键。

例如：

list1 = ["test", "test1", "test2"] => it works properly.


list2 = ["test", "test2", "test2"] => it will freezes the browser.

对于每个“bs-sortable”，您必须具有[（ngModel）]的唯一键。