0

Я использую функцию trackByIndex чтобы проставить индексы элементам внутри цикла ngFor:

trackByIndex(index: number, obj: any): any {
  return index;
}

Вот сокращенный пример моей конструкции:

<div *ngFor="let comment of comments; let i = index; trackBy: trackByIndex">
  {{ i, comment.text }}
  <div *ngFor="let answer of comment.answers; let j = index; trackBy: trackByIndex">{{ j, answer.text }}</div>
</div>

Но когда первый ngFor отрисовывает несколько элементов, то во вложенном цикле итерация (j) начинается заново.

Вот короткое представление для большей наглядности, как отрисовываются и итерируются объекты:

"comment 1": {
    "answer 1",
    "answer 2"
},
"comment 2": {
    "answer 1", // должен быть индекс 3
    "answer 2" // должен быть индекс 4
}

Проблема в том, что итерации происходят в локальных скоупах, поэтому в каждом из объектов она начинается сначала. Как я могу проставить индексы объектам answer через все объекты comment?

Искренне надеюсь, что понятно изложил проблему.

0

2 ответа 2

0

Возможен такой вариант:

<div *ngFor="let comment of comments; let i = index; trackBy: trackByIndex">
  {{ i, comment.text }}
  <div *ngFor="let answer of comment.answers; let j = index; trackBy: trackByIndex">{{ answer.text }} {{counter++}}</div>
</div>

В этом компоненте определяется переменная счетчика counter.

counter: number = 0;

Для ее увеличения и вывода значения применяются метод increment. Это если я правильно понял суть вопроса.

2
  • Так ведь тоже неверно получится?
    – Qwertiy
    20 апр 2018 в 23:23
  • Если ему нужен счетчик и вывести к каждому элементу число согласно свое очереди, то можно.. а иначе нет, глобально скоуп в данной директиве, не представляю.. только переменная объявленная внутри самого класса 21 апр 2018 в 5:27
0

А может, просто использовать css?

https://codesandbox.io/s/52x312ooy4?module=%2Fsrc%2Fapp%2Fapp.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <ul class="nth-reset">
      <li *ngFor="let x of data; let i = index">
        Section {{i+1}}
        <ul>
          <li *ngFor="let y of x" class="nth-inc">
            {{y}} is item #<span class="nth"></span>
          </li>
        </ul>
      </li>
    </ul>
  `,
  styles: [`
    .nth-reset { counter-reset: nth 0 }
    .nth-inc {counter-increment: nth }
    .nth:after { content: counter(nth) }
  `]
})
export class AppComponent {
  data = [
    ["1-A", "1-B", "1-C"],
    ["2-A", "2-B"],
    ["3-A", "3-B", "3-C", "3-D"]
  ];
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.