Не может быть несколько привязок шаблона к одному элементу Angular2 + - PullRequest
Новая
       36

Не может быть несколько привязок шаблона к одному элементу Angular2 +

0 голосов
/ 03 декабря 2018

У меня есть эта ошибка:

Невозможно иметь несколько привязок шаблона к одному элементу ("list-group-item-success" [draggable] * ngFor = "let item of [vegetable [0] [0]] "что я знаю, что это значит.

Но я понятия не имею, как обойти это, потому что я пытаюсь сделать так, чтобы отобразить мой 2D-массив, и мне нужносделать вложенный цикл. У меня будет i incremental, который будет циклически проходить через внешний массив для отображения элементов внутри. Поэтому все они должны быть связаны с директивой draggable. Но это то, что я не могу использовать несколько ngFor's.

Вот код: 

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>

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

Я бы предложил использовать ng-container внутри библиотеки li.Вы не можете иметь 2 * ngFor в одном элементе HTML.

Пример: 

<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>
0 голосов
/ 03 декабря 2018

У вас есть два *ngFor на одном элементе.Распакуйте внутреннюю в отдельную div. 

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