Как использовать несколько ngFor для одной директивы для привязки свойств - PullRequest
Новая
       41

Как использовать несколько ngFor для одной директивы для привязки свойств

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

Я использую модуль ng-drag и drop npm, который обеспечивает директиву draggable.У меня также есть двумерный массив со списком элементов, которые я хочу отобразить внутри 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, а не отдельные перетаскиваемые элементы, как мне нужно, ивыглядит так:

enter image description here

Но я хочу, чтобы каждый элемент находился в отдельных зеленых строках, и каждый должен быть перетаскиваемым.

1 Ответ

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

Вы рядом.Вам нужно инвертировать 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>
...