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

【问题标题】：Can't have multiple template bindings on one element Angular2+一个元素Angular2+上不能有多个模板绑定
【发布时间】：2019-05-04 12:34:51
【问题描述】：

我有这个错误说

一个元素上不能有多个模板绑定 (" list-group-item-success" [可拖动] *ngFor="let item of [vegetables[0][0]]" 我知道是什么意思。

但我不知道如何解决这个问题，因为我要做的是显示我的二维数组，我需要做嵌套循环。我将拥有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>

【问题讨论】：

*ngFor="let vegetable of vegetables" 和 *ngFor="let items of vegetable"

标签： arrays angular bind ngfor angular-components

【解决方案1】：

我建议在 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

我认为最好使用ng-container 而不是div，因为他没有定义任何额外的属性
@JacopoSciampi，当然这是另一种方式