Question

我说这个错误

在一个元素上不能有多个模板绑定（“ list-group-item-success“ [可拖动] * ngFor =”让项的 [vegetables [0] [0]]”，我知道这是什么意思。

但是我不知道如何解决这个问题，因为我想做的是显示2D数组，我需要做嵌套循环。我将使用i增量，它将在外部数组中循环显示内部的项目。因此，所有它们都必须绑定到draggable指令。但这就是我不能使用多个ngFor的原因。

代码如下：

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'}]]

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

Answer 1

您在同一元素上有两个*ngFor。将内部的内容提取到单独的div中。

<li *ngFor="let item of [vegetables[0][0]]"...
  <div *ngFor="let items of [item.values]" ...

Answer 2

我建议在li内使用ng-container。一个HTML元素中不能有2个* ngFor。

示例：

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

一个元素Angular2 +上不能有多个模板绑定

2 个答案: