Create dynamically ion-row?

Ionic Framework ionic-v3
1

Hi there !

First, I’d like to know if it’s possible to create a ion-row (or ion-item) dynamically…
In the following code, I have a ion-row with a ion-item in which I have 2 ion-thumbnail and a ion-label.
I’d like to create a specific thumbnail when you click on on it, you can choose from a list the picture wanted. Each thumbnail has to be unique because I’d like to save the path of the picture in an array.
As you can see, it’s repeat all the time the same ion-thumbnail…
I really don’t know how to do that ! :tired_face: I don’t know if I’m really clear enough… If someone understand what I mean and could enlighten me, it will be awesome ! :star_struck:

      <ion-row class="row" responsive-sm wrap *ngFor="let n of nTeams">
        <ion-item>
          <ion-thumbnail item-start (click)="chooseTeam()">
            <img src="{{'../../assets/imgs/' + fileName + '.png'}}">
          </ion-thumbnail>
          <ion-label text-center>23 - 19</ion-label>
          <ion-thumbnail item-end (click)="chooseTeam()">
            <img src="{{'../../assets/imgs/' + fileName + '.png'}}">
          </ion-thumbnail>
        </ion-item>
      </ion-row>

IonRow
IonRow.png1101×562 82.9 KB

2

Hello,
maybe you can pack the path into your object in nTeams like

let nTeams = [] nteams .push({winner: 'FcB', winnerlogo: fcblogo, result: '7:0', looser: 'Psg', looserlogo: 'psglogo' }
where whateverlogo contains the path to your pngs.
and use it in html like

<img src= n.winnerlogo>

By the way: …/…/assets… will work in browser but not on device.

Best regards, anna-liebt

3

Thanks for your answer.

But how do you create with *ngFor a ion-thumbnail which is unique…?
I mean when I iterate with *ngFor, it’s create the same thumbnail in all the case.
If the *ngFor iterate 3 times , I want 6 differents ion-thumbnail (btw know how to refer to it) and not 2 ion-thumbnail repeated 3 times…

4

Hello,

<ion-row class="row" responsive-sm wrap *ngFor="let n of nTeams">
        <ion-item>
          <ion-thumbnail item-start (click)="chooseTeam()">
            <img src={{n.homelogo}}>
          </ion-thumbnail>
          <ion-label text-center>{{n.result}}</ion-label>
          <ion-thumbnail item-end (click)="chooseTeam()">
            <img src={{n.guestlogo}}>
          </ion-thumbnail>
        </ion-item>
      </ion-row>

First sorry for the wrong syntax in img tag in the previous post. I forgot the curled braces.

You add the path of your logos to your object, and all needed informations…
For each game you add a object to the array.
At the end you have an array with objects, where each object contain all information that you need to display inside your ngFor.

your Object looks something like this

let logo1 = 'assets/logo/fcb.png';
let logo2 = 'assets/logo/psg.png';
let result = '7=0';
nteams.push({homelogo: logo1, result: result, guestlogo: logo2 });

Best regards, anna-liebt

5

In fact, my array is empty after *ngFor has iterated…
I want push the data after that the logo has been select by clicking on ion-thumbnail

6

Hello,

I guess, if your array is empty there is nothing. Maybe in one or all objects is for example guestlogo=’’ or null or…

you iterate over an array, that holding objects that holds your information. ngFor takes all that and build your html

How you fill these informations to your object is your choise. If you change a variable that is used in one of your objects or you change nteams[i].guestlogo =‘assets/logo/saints.png’ or put #whatevernamed to an element and grab it with @Viewchild or… ngfor iterates over the array and uses the provide informations to build the output.

Best regards, anna-liebt…

7

Hello,
maybe this helps you.

with adding let i=index you can get the obect in your array by index that holds the specific informations.

<ion-row class="row" responsive-sm wrap *ngFor="let n of nTeams; let i=index">

(click)="choseTeam(i)"

and in .ts

choseTeam(index){

nTeam[index].guestlogo ='assets/whatever...

bytheway the code is not typo proofed etc.

Best regards, anna-liebt

8

Thanks for your answer
You are in the way ^^
I’m going to rethink about the conception & I let you know