Как манипулировать значением индекса в * ngFor? - PullRequest
Новая
       11

Как манипулировать значением индекса в * ngFor?

0 голосов
/ 14 сентября 2018

В настоящее время я использую Angular 6, и у меня возникло небольшое сомнение. Как мы можем манипулировать индексной переменной, которую мы получаем в * ngFor, в соответствии с нашими потребностями. Например, 

<li *ngFor="let iah of jsonObj; let i = index;">
   <span>{{jsonObj[i].content}}</span>
   <span>{{jsonObj[(i+1)].content}}</span>
</li>

Приведенный выше фрагмент дважды извлечет один и тот же объект и отобразит его содержимое. Как можно отобразить i-й объект в первом диапазоне и (i + 1) -й объект во втором диапазоне? Теперь то, как я это сделал, работает только для первой итерации. как только он перейдет ко второй итерации, произойдет повторение. Есть идеи по этому поводу?

Ответы [ 4 ]

0 голосов
/ 14 сентября 2018

Вы не сможете отображать его по столбцам только из HTML.

Измените массив, выполнив итерацию.Вы можете сделать это, когда вы назначаете данные в нем как:

TS 

newJsonObj = [];

for(let i = 0; i<this.jsonObj.length; i++) {
    this.newJsonObj.push({key: this.jsonObj[i].content, value: this.jsonObj[i+1].content})
    i++;
}

HTML 

<li *ngFor="let iah of newJsonObj;">
   <span>{{iah.key}} </span>
   <span>{{iah.value}}</span>
</li>

здесь вы можете найти стек стека

0 голосов
/ 14 сентября 2018

Переменной индекса нельзя манипулировать в угловых.Вы можете поставить условие ngIf* перед вашим span div's, чтобы изменить вид.Ниже приведено изменение в вашем фрагменте для справки: 

<div *ngFor="let iah of jsonObj; let i = index;">
    <li *ngIf="i%2==0">
        <span>{{jsonObj[i].content}}</span>
        <span>{{jsonObj[(i+1)].content}}</span>
    </li>
</div>
0 голосов
/ 14 сентября 2018

Насколько я понимаю, если вы хотите вывод, подобный этому: 

 - test1 test2
 - test2 test3
 - test3 test4
 - test4

, тогда вам нужно проверить, есть ли у вашего json[i+1] данные или нет, потому что после последнего индекса, если вы используете i+1массив не имеет значения i+1, поэтому выдает ошибку.

Таким образом, вы можете использовать его в своем HTML: 

<li *ngFor="let iah of jsonObj; let i=index;">
    <span> {{ jsonObj[i].content }}</span>
    <span *ngIf="i < jsonObj.length -1"> {{ jsonObj[i+1].content }} </span>
</li>

ИЛИ Если вы хотите вывод, как это: 

- test1 test2
- test3 test4

Чем вы можете использовать метод ниже: 

<ng-template ngFor let-item let-i="index" [ngForOf]="jsonObj">
    <li *ngIf="i%2 == 0">
        <span> {{ jsonObj[i].content }}</span>
        <span *ngIf="i < jsonObj.length -1"> {{ jsonObj[i+1].content }} </span>
    </li>
</ng-template>

Проверка Stackblitz Live Demo

0 голосов
/ 14 сентября 2018

ваш индекс -1 позади того, что вы действительно хотите.Это означает, что на первой итерации вы печатаете 

index = 0;
jsonObj[0].content
jsonObj[1].content

index= 1;
jsonObj[1].content
jsonObj[2].content

index=2:
jsonObj[2].content
jsonObj[3].content
...