如何创建未知数量的bs-sortable元素？ Angular4 ngx-bootsrap

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