0

是否有可能以某种方式创建 bs-sortable 元素*ngFor?当我尝试这个(下面的代码)时,浏览器中的整个页面都会冻结。

我想创建未知数量的可排序元素。它们之间是可排序的。

我正在使用 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 { }
4

1 回答 1

0

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

例如:

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


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

对于每个“bs-sortable”,您必须拥有 [(ngModel)] 的唯一键。

于 2018-09-15T06:33:11.600 回答