Отображение данных со значением индекса в виде сетки
Вот мой код:
<ion-grid no-padding>
<ion-row *ngFor = "let item of items" let i=index no-padding>
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3>
<ion-card [ngStyle] = "{'background': 'url(' + item.PImage + ')'}">
<div *ngIf = "item.Ptype == 'cash'" class = "cash-cat-icon"></div>
<div *ngIf = "item.Ptype == 'cheque'" class = "cheque-cat-icon"></div>
<div>
<h2 item-title >{{item.pName}}</h2>
<h4 item-title >RS: {{item.PPrice}}</h4>
</div>
</ion-card>
</ion-col>
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3>
<ion-card [ngStyle] = "{'background': 'url(' + item.PImage + ')'}">
<div *ngIf = "item.Ptype == 'cash'" class = "cash-cat-icon"></div>
<div *ngIf = "item.Ptype == 'cheque'" class = "cheque-cat-icon"></div>
<div>
<h2 item-title >{{item.pName}}</h2>
<h4 item-title >RS: {{item.PPrice}}</h4>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
Теперь мои данные выглядят так: {имя1, имя2, имя3, имя4, имя5, имя6}
Но на моем экране я получаю что-то вроде:
name1 name1
name2 name2
name3 name3
name4 name4
Но я хочу вроде:
name1 name2
name3 name4
name5 name6
Пожалуйста, помогите мне. Как я могу этого добиться! Я знаю, что нужно хранить индекс, но не знаю, как показать эти значения в соответствующей сетке.
также stackoverflow.com/questions/41597438/…
@SurajRao, я пробовал эту ссылку, дин работает.Так что только разместил здесь
Ответы 1
Оберните ion-col в ng-контейнер и дайте условие для ввода только для четного индекса
<ion-grid no-padding>
<ion-row no-padding *ngFor = "let item of items;let i=index">
<ng-container *ngIf = "i % 2 == 0">
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf = "i < items.length">
<ion-card [ngStyle] = "{'background': 'url(' + items[i].PImage + ')'}">
<div *ngIf = "items[i].Ptype == 'cash'" class = "cash-cat-icon"></div>
<div *ngIf = "items[i].Ptype == 'cheque'" class = "cheque-cat-icon"></div>
<div>
<h2 item-title >{{items[i].pName}}</h2>
<h4 item-title >RS: {{items[i].PPrice}}</h4>
</div>
</ion-card>
</ion-col>
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf = "i + 1 < items.length">
<ion-card [ngStyle] = "{'background': 'url(' + items[i+1].PImage + ')'}">
<div *ngIf = "items[i+1].Ptype == 'cash'" class = "cash-cat-icon"></div>
<div *ngIf = "items[i+1].Ptype == 'cheque'" class = "cheque-cat-icon"></div>
<div>
<h2 item-title >{{items[i+1].pName}}</h2>
<h4 item-title >RS: {{items[i+1].PPrice}}</h4>
</div>
</ion-card>
</ion-col>
</ng-container>
</ion-row>
</ion-grid>
пожалуйста, проверьте демонстрация
не думаю, что это то, что ищет OP .. Насколько я могу судить, они хотят, чтобы в каждой строке было по два столбца.
@Abinesh Joyel, я не понимаю. Мне нужно два столбца в строке. Пожалуйста, проверьте мой вопрос
Если они хотят два столбца в одной строке, они будут только дублироваться. Я запутался сейчас, что они ищут
@david извини, если я ошибаюсь. я изменю свой ответ
@AbineshJoyel, мне нужно два столбца в строке. Если мои данные похожи на 1,2,3,4,5,6. Тогда я хочу [1,2], следующая строка [3,4] такая же
@david, я обновлю его, вы можете достичь этого по индексу цикла ngFor
@AbineshJoyel да, это будет полезно
@AbineshJoyel, я получаю эту ошибку: TypeError: Cannot read property 'length' of null
@david вы можете проверить демонстрацию, а также элементы должны быть массива
@AbineshJoyel мой такой [{"Pd":"1","Pname”:”#110318-00001-001”},{"Pd”:”2”,”Pname”:”#110318-00001-001”},{"Pd”:”3”,”Pname”:”#110318-00001-001"}]
пожалуйста, сверьтесь с этим stackblitz.com/edit/ionic-ndgdrw?file=pages%2Fhome%2Fhome.ht мл
@AbineshJoyel извините за поздний повтор. Да, теперь все в порядке. Но одна проблема была здесь <div *ngIf = "items[i].Ptype == 'cash'" class = "cash-cat-icon"></div> <div *ngIf = "items[i].Ptype == 'cheque'" class = "cheque-cat-icon"></div> , у меня есть только один чек. это моя вторая сетка ячеек, но в этой конкретной ячейке я вижу обе точки, которые представляют как чеки, так и наличные.
@AbineshJoyel, почему это так? Любая идея ??
Позвольте нам продолжить обсуждение в чате.
@AbineshJoyel, пожалуйста, помогите мне здесь stackoverflow.com/questions/49817228/…
@david я проверю и отвечу
Возможный дубликат Используйте * ngFor index для группировки нескольких итераций в одну строку