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

Question

我正在使用提供 draggable 指令的 ng-drag and drop npm 模块。我还有一个二维数组，其中包含要在 li 元素内显示的项目列表，并使每个项目都可拖动。问题是我不能使用多个 ngFor，因为这在 angular 中无效，所以我需要找到一种方法来解决这个问题。为此，我将内部数组项包装在 ng-container 内，但这无济于事，因为那样我就无法拖动单个 li 项，它包装了整个列表。我想到的唯一想法是：

app.component.ts

  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>

但它将外部数组索引中的所有项目放在一 li 行中，而不是根据需要分开可拖动的项目，看起来像这样：

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

Answer 1

你很接近。您需要反转 li 和 ng-container，然后就可以开始了。示例：

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