I have one row with two columns as grid view to populate the date from the sevrver. By view everything is fine. But say i have 2 row with 4 column.like below :
a b
c d
So i have a click function on my row where selected item can see as detail view page.But the issues here is .For example if i select first grid cell in first row. that is ‘A’.Then in detail page its showing all the details about ‘A’
Same if i select ‘B’ then also in detail screen its showing as ‘A’ grid cell data only.Which is showing all the data about ‘A’.
Things i tried :
print the function of on click .if i select “A” then A is showing.If i select “B” then also on selected click function “A” Data only showing.
Here is my code :
<ion-grid no-padding>
<ion-row no-padding *ngFor="let item of Data;let i=index" (click)="showDetails(item)">
<ng-container *ngIf="i % 2 == 0">
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i < Data.length">
<ion-card no-margin>
<div gallery-title>
<h2 item-title text-wrap text-center>{{Data[i].ProductName}}</h2>
</div>
</ion-card>
</ion-col>
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i+1 < Data.length">
<ion-card no-margin>
<div gallery-title>
<h2 item-title text-wrap text-center>{{Data[i+1].ProductName}}</h2>
</div>
</ion-card>
</ion-col>
</ng-container>
</ion-row>
</ion-grid>
Any help.I don't know what i am doing wrong here.
Thanks in advance !!
Its simple put the click in ion-col and that's it what you need is to pass the Data array with index in showDetails function
<ion-grid no-padding>
<ion-row no-padding *ngFor="let item of Data;let i=index" (click)="showDetails(item)">
<ng-container *ngIf="i % 2 == 0">
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i < Data.length" (click)="showDetails(Data[i])">
<ion-card no-margin>
<div gallery-title>
<h2 item-title text-wrap text-center>{{Data[i].ProductName}}</h2>
</div>
</ion-card>
</ion-col>
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i+1 < Data.length" (click)="showDetails(Data[i+1])">
<ion-card no-margin>
<div gallery-title>
<h2 item-title text-wrap text-center>{{Data[i+1].ProductName}}</h2>
</div>
</ion-card>
</ion-col>
</ng-container>
</ion-row>
</ion-grid>
If I understand this right, it looks as though you're iterating over Data four times, but only actually outputting two rows from it (your *ngIf="i % 2 == 0" is causing you to lose access to two of your items.
So you're outputting the column for B on the first pass, in which case item is actually still item A.
Because of the way the Ionic columns work, you probably don't need to write it like this. Try the following:
<ion-grid no-padding>
<ion-row no-padding>
<ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngFor="let item of Data" (click)="showDetails(item)">
<ion-card no-margin>
<div gallery-title>
<h2 item-title text-wrap text-center>{{ item.ProductName }}</h2>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
You're only going to have one row with this, but the columns should work out the way you want.
The click event you have bound is on the row not the column. I would suggest moving the click event to the <ion-col elements instead.
Related
I have a list of image they come from an json array with 7 elements :
The key of image is
<ion-grid>
<ion-row *ngFor="let image of imageList; let i = index;">
<ion-col>
<div >
<img [src]="image.imageUrl" />
</div> </ion-col>
<ion-col>
<div >
<img [src]="image.imageUrl" />
</div>
</ion-col>
</ion-row>
</ion-grid>
But this code show me the same pic per row , I have tried to set image[i] on the first col and image[i+1] on the second but nothing.
I want to show two image per row like this but without same image.
Thanks.
Something like this should work:
<ion-grid>
<ion-row *ngFor="let image of imageList; let i = index;">
<ion-col>
<div >
<img [src]="imageList[i]?.imageUrl" />
</div> </ion-col>
<ion-col>
<div >
<img [src]="imageList[i + 1]?.imageUrl" />
</div>
</ion-col>
</ion-row>
Inside de *ngFor loop, the image will always be one image for every iteration. You should iterate the imageList and use the index to access the images from imageList. Hope it makes sense
I am trying to display images beginning at the left of each row in an ngFor. The images are displaying successfully, however, in 1 row if there is only one image and the same with another the images are placed on opposite sides. For example row 1 image at left and row 2 large gap and image at right .
html file
<ion-icon class="ion-icon1" name="calendar"></ion-icon>
<ion-card [ngClass]="note.card ? 'card-item' : 'no-card' ">
<ion-card-header>
<b>Date:</b> {{note?.Created}}
</ion-card-header>
<ion-card-content [ngClass]="isMenuOpen[i] ? 'active' : 'inactive'" *ngFor='let ind of individuals'>
<ion-list>
<b>Injury: </b> {{ind?.InjuryType}}
</ion-list>
<ion-row class="ion-align-items-start">
<ion-col size="6" *ngFor='let img of pImages'>
<div *ngIf="img" class="ion-align-self-start">
<span *ngIf="note.noteID === img.NoteID">
<img src="http://ccoulter12.lampt.eeecs.qub.ac.uk/api/{{img.Image}}" (click)="photoLarge(img.Image)" />
</span>
</div>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</timeline-item>
</timeline>
What you can do is use display property of css. Like below in ngStyle
<span [ngStyle]="{'display':note.noteID === img.NoteID?'block':'none'} ">
<img src="http://ccoulter12.lampt.eeecs.qub.ac.uk/api/{{img.Image}}" (click)="photoLarge(img.Image)" />
</span>
<ion-list>
<div>
<ion-list>
<div *ngFor="let itinerary of filteredItineraries">
<ion-card class="itinerary-module">
<ion-card-content *ngIf="itinerary.id !== selection.id">
<div>
<h2>{{itinerary.startDate | date: "MM/dd/yyyy"}} - {{itinerary.endDate | date: "MM/dd/yyyy"}}</h2>
</div>
<div>
<h1>{{itinerary.jobDesc}}</h1>
</div>
<div>
<h2>{{itinerary.jobCode}}</h2>
</div>
<ion-item lines="none">
<ion-icon slot="start" name="thumbs-down" (click)="removeItem(itinerary.id)></ion-icon>
<ion-icon slot="end" name="thumbs-up" (click)="removeItem(itinerary.id)" ></ion-icon>
</ion-item>
</ion-card-content>
</ion-card>
</div>
</ion-list>
</div>
</ion-list>
Is there a way to only display this list one item at a time...say index 0, then when I click one of the icons to remove the current item in index 0 so that index 1 then moves to 0 and is displayed on the screen?
Do not iterate over the loop and render. Just point the UI to first element filteredItenaries[0]
If you want to show the next item, call a function which has the implementation filteredIternaries.splice(0,1). So, therefore, the first element will be updated in the Array as well as in the UI.
I've an ion-card that get its contents from a web server, all is working fine except linking ion-card click event to external url, below is my code
<ion-content no-padding >
<ion-item no-padding *ngFor="let item of items" >
<ion-card (click)="goToDetails('{{item.link}}')">
<img class="images" src="http://mydomain/{{item.captionImage}}">
<ion-item text-wrap>
<div class="headings">{{item.title}}</div>
</ion-item>
<ion-card-content text-wrap>
<p>{{item.message}}"</p>
</ion-card-content>
<ion-row>
<ion-col col-9>
<ion-row>
<ion-col>
<img class="owner-logo" src="http://mydomain/{{item.sourceLogo}}">
</ion-col>
<ion-col>
<div class="owner-name">{{item.source}}</div>
</ion-col>
<ion-col></ion-col>
<ion-col></ion-col>
<ion-col></ion-col>
</ion-row>
</ion-col>
<ion-col col-3 text-right>
<button ion-button clear small color="danger" icon-start (click)="regularShare(index)">
<ion-icon name='share'></ion-icon>
Share
</button>
</ion-col>
</ion-row>
</ion-card>
</ion-item>
</ion-content>
my .ts file is
public goToDetails(url : string){
let target = "_self";
this.theInAppBrowser.create(url,target,this.options);
}
I got this error message
Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 13.
You need to write ion-card like this
<ion-card (click)="goToDetails(item.link)">
If you are in in-build directive like click, ngIf you don't need to use interpolation
I have to solve this problem: I want to display a list of rows with fixed height. Each row has to be horizontally divided in 2 equal parts. Each part has its background color, derived from the i-th element of the list they are referred. Each object in the list has 2 fields (named leftColor and rightColor) that contain the color to be displayed.
In pseudo-code:
<ion-row *ngFor="let colorSource of sources">
<ion-col col-6 background-color="{colorSource.leftColor}"> </ion-col>
<ion-col col-6 background-color="{colorSource.rightColor}"> </ion-col>
</ion-row>
Something like...
How could i obtain something like this?
TY in advance!
Instead of background-color="{colorSource.leftColor}", try to use [ngStyle]="{'background-color': colorSource.leftColor}".
So your final code will be:
<ion-row *ngFor="let colorSource of sources">
<ion-col col-6 [ngStyle]="{'background-color': colorSource.leftColor}"> </ion-col>
<ion-col col-6 [ngStyle]="{'background-color': colorSource. rightColor}"> </ion-col>
</ion-row>
For information about ngStyle diective please look here official doc.
I hope this will help you.