Angular 6: сохранение значения для использования в * ngFor - PullRequest
Новая
       14

Angular 6: сохранение значения для использования в * ngFor

0 голосов
/ 11 октября 2018

В теле цикла в приведенном ниже коде: 

<ul>
   <li *ngFor="let article of articles; index as i">
       <a>{{ articles[i].title }} -- {{i}}</a>
       <p>{{ articles[i].body }}</p>
       <!-- i++ -->  
       <p>{{ i }}</p>
   </li>
</ul>

Можно ли в любом случае сохранить значение i++ в этой позиции, а затем распечатать новое значениеиз i?

Затем значение i обновляется новым значением и используется в следующем цикле.Я хотел бы зациклить 2 элемента за раз, а не только один.

Это похоже на то, что мы можем сделать в Java, как показано ниже: 

for (int i = 0; i < 10; i++) {
    System.out.println(i);
    i++;
    System.out.println(i);
}

1-й цикл:

0

1

2-й цикл:

2

3

и т. Д.

Я нашел решение, которое находится по этой ссылке: Циклически перебирая два списка одновременно, используя * ngFor

Решение: разбить массив на 2-мерный массив, этолегко зацикливаться с помощью ngFor

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Используйте эту функцию, чтобы преобразовать ваши данные в тип структуры, к которой вы хотите получить доступ. 

someData = [1,2,3,4,5,6];

transformData(data) {
    let temp = []
    for(let i = 0; i < data.length; i++) {
      let temp2 = [];
      temp2.push(this.data[i]);
      i++;
      temp2.push(this.data[i])
      temp.push(temp2);
    }
    return temp;
  }

, а затем получите доступ к ней в своем HTML, как это 

<p *ngFor="let data of transformData(someData)">
{{data[0]}}, {{data[1]}}
</p>
0 голосов
/ 11 октября 2018

Если вопрос остается актуальным, для тех, кто ищет ответ, я бы порекомендовал вам обратиться к этому сообщению: Перебирая два списка одновременно, используя * ngFor

Сообщениене мое, но показывает простое решение с использованием конвейера.

...