How can you reference template input variable 'hero' from *ngFor="let hero of heros" inside Typescript

Question

How can you reference template input variable hero from *ngFor="let hero of heros" inside Typescript?

I'm using a stateful component So code has this for the 'heros' equivalent in my code is:

   servers: Server[];

It is populated when screen first appears via ionViewDidLoad.

When I add the server via button at bottom, ionViewDidEnter calls same loading method to populate servers again.

When debugging I'm going via ionViewDidLoad path.

[

which one do you want? you will have many `hero` variables for each `ngFor` entry — Max Koretskyi, Aug 11 '17 at 06:17
The problem is that you are accessing the server variable outside of *ngFor — brijmcq, Aug 11 '17 at 08:25

score 2 · Answer 1 · answered Aug 11 '17 at 01:23

2

Probably you can pass it inside a function

<div *ngFor="let hero of heros">
  <li click="print(hero)">{{hero}}</li>
</div>

and inside TS,

print(hero:Hero){
 console.log(hero.name);
}

answered Aug 11 '17 at 01:23

Sajeetharan

216,225
63
350
396

did it help you ? – Sajeetharan Aug 11 '17 at 01:38
Actually hero was undefined. Do I actually need the {{hero}} to make it work? – JGFMK Aug 11 '17 at 01:40
From the let of the ngFor I'd presumed... I say this as I want to pass a whole object, with it's associated properties - a value object... – JGFMK Aug 11 '17 at 01:48
probably a typo in "let hero of heros" ? I think it should be "let hero of heroes" – brijmcq Aug 11 '17 at 04:19
No I'm not. I'm using an event handler in an Ionic mobile app. Content from loop is rendering. I have a swipe left menu (ion-item-sliding plus ion-item, ion-item-options) that calls the edit handler. Placed debugger inside event handler. I always get undefined. Have tried ( $event, hero) as params as well as (hero). Always getting undefined... – JGFMK Aug 11 '17 at 07:54
@JGFMK could you create a plunker that showcases the issue? – AT82 Aug 11 '17 at 07:57
I'm not sure how easy it is to create an Ionic 3 plunker. Have done in past with Angular.. – JGFMK Aug 11 '17 at 08:06
@brijmcq - You can actually see some test data rendering, for me to be able to click on. – JGFMK Aug 11 '17 at 08:10
@JGFMK can you include the actual code instead of a picture? – brijmcq Aug 11 '17 at 08:13

score 0 · Answer 2 · answered Aug 11 '17 at 08:31

0

You are accessing the server variable outside of *ngFor loop that's why the value you got was undefined, because the server variable was unknown outside the ion-item. Try to insert the code ion-item-options inside the <ion-item> and it should work

answered Aug 11 '17 at 08:31

brijmcq

3,354
2
17
34

JGFMK · Accepted Answer · 2017-08-11T11:08:48.010

Per the Ionic documentation. on ionic-item-sliding you have to nest <ion-item-options> outside <ion-item>.

It ended up being a case of me putting the *ngFor on the wrong tag.

Thank you both @Sajeetharan and @brijmcq. Both your post sent me down the write path in the end.

Html

<ion-item-sliding *ngFor="let server of servers"> <! <<<-- Moved here -->
     <ion-item detail-push>
         <h1>{{server?.server}} </h1>
         <h2>{{server?.port}} </h2>
         <h2>{{server?.username}}</h2>
         <h2>{{server?.password}}</h2>
      </ion-item>
      <ion-item-options side="left">
         <button ion-button color="primary" 
                 (click)="editServerConfigPage(server)">
            <ion-icon name="redo"></ion-icon>
            Edit
         </button>
         <button ion-button color="danger">
            <ion-icon name="remove-circle"></ion-icon>
            Remove
         </button>
      </ion-item-options>
</ion-item-sliding>

Typescript

editServerConfigPage(server:Server):void {
    console.log('editServerConfigPage()', server);
    this.navCtrl.push('LoginDetailPage', {server: server});
}

How can you reference template input variable 'hero' from *ngFor="let hero of heros" inside Typescript

3 Answers3

Linked