2

我正在使用提供draggable指令的 ng-drag 和 drop npm 模块。我还有一个 2D 数组，其中包含我想在li元素中显示的项目列表，并使它们中的每一个都可拖动。问题是我不能使用多个 ngFor，因为这在角度上是无效的，所以我需要找到一种方法来解决这个问题。为此，我将内部数组项包裹在里面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>

但它将所有项目放在外部数组索引中的一行中，而不是根据我的需要分开可拖动项目，如下所示：

在此处输入图像描述

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

4

1 回答 1

3

你很亲密。你需要倒转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>
于 2018-12-03T18:01:59.573 回答