如何在一个指令上使用多个ngFor进行属性绑定

我正在使用ng拖放npm模块,它提供 draggable 指令。我还有一个2D数组,里面有我想显示的项目列表 li ng-container 锂 项目,它包装了整个列表。我唯一想到的是:

  vegetables = [[
{name: 'Carrot', type: 'vegetable'},
{name: 'Onion', type: 'vegetable'},
{name: 'Potato', type: 'vegetable'},
{name: 'Capsicum', type: 'vegetable'}],
[
  {name: 'Carrotas', type: 'vegetable'},
  {name: 'Onionas', type: 'vegetable'},
  {name: 'Potatoas', type: 'vegetable'},
  {name: 'Capsicumas', type: 'vegetable'}]]

this.i++;

      this.indexes = this.vegetables[this.i];

app.component.html

<li class="list-group-item list-group-item-action list-group-item-success" [draggable] *ngFor="let item of [this.indexes]" [dragClass]="'active'" [dragTransitClass]="'active'" [dragData]="item" [dragScope]="item.type" [dragEnabled]="dragEnabled">
      {{item.name}}

</li>

现在我将我的代码如下所示:

 <li class="list-group-item list-group-item-action list-group-item-success" [draggable] *ngFor="let item of [vegetables[0]]" [dragClass]="'active'" [dragTransitClass]="'active'" [dragData]="item" [dragScope]="item.type" [dragEnabled]="dragEnabled">
  <ng-container *ngFor="let items of item">
      {{items.name}}
  </ng-container>
</li>

但我希望每个项目都在单独的绿色行中,并且每个项目都可以拖动。