Как сделать вложенные циклы внутри шаблона в angular2 + - PullRequest
Новая
       39

Как сделать вложенные циклы внутри шаблона в angular2 +

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

Мне нужно просмотреть различные индексы массива и их значения внутри моего шаблона.У меня есть этот объект: 

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

И я делаю это: 

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

Но [vegetables[0]] только выводит "Морковь" из списка и все.Вместо этого мне нужно вывести первый массив и все его содержимое, затем на второй итерации вывести второй массив с «морковью», «луком» и т. Д. Как этого добиться?

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

1 Ответ

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

Прежде всего, указанный вами массив неверен.Я предполагаю, что это будет так: 

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

Если я правильно понял, либо вам придется написать с *ngIf для индексов (например, проверить, является ли индекс нечетным или четным), либо уменьшитьони должны быть едины.Например: 

const vegetablesReduced = vegetables.reduce((r, x) => [...r, ...x], []);

Это создаст массив как: 

vegetablesReduced = [
  {name: 'Carrot', type: 'vegetable'},
  ...
  {name: 'Carrotas', type: 'vegetable'},
  ...
];

РЕДАКТИРОВАТЬ: Ах .. Я только вижу, что ваша проблема лежит только в определении массива.То, как вы создали массив, является ложным, поскольку вы создаете только первое, а второе игнорируется (javascript ...).Попробуйте изменить массив, как я указал, и посмотрите, работает ли он.

EDIT2: это должен быть 2D-массив, в то время как у вас есть только 1D (и тоже с ошибкой, поскольку одномерные массивы нельзя разбить на несколько массивов)Чего вам не хватает, так это только обернуть все это в другой массив, и это сработает.

...