angular 2/ionic 2 - for loop in ts

Question

I want to assign index to the content, in order to add infowindow to markers based on their index.

console.log(storeData.length) will returns 4 rows of data.

Right now, both method returns me the same result, 4 infowindow overlay with each other. I seem a lot of examples, however I do not know how to implement to my code. Especially the var marker,i;

TS

for ( let infowindowData of storeData){

  let content = '<ion-item>' + 
     '<h2 style="color:red;">' + infowindowData.ListingTitle +'</h2>' + 
     '<p>' + infowindowData.ListingDatePosted + ' ' + infowindowData.ListingTime + '</p>' +
     '</ion-item>';    

     this.addInfoWindow(marker, content);

}

What I tried

 let storeData =  this.data;

 for(let i=0; i<storeData.length;i++){

 let content = '<ion-item>' + 
     '<h2 style="color:red;">' + storeData[i].ListingTitle +'</h2>' + 
     '<p>' + storeData[i].ListingDatePosted  + ' ' + storeData[i].ListingTime  + '</p>' +
     '<p> Salary: $' + storeData[i].ListingSalary  + '</p>' +
     '</ion-item>';    


 let infoWindow = new google.maps.InfoWindow({
 content: content
 });

 google.maps.event.addListener(marker, 'click', () => {
 infoWindow.open(this.map, marker);
 });

 }

for(i>=0; ? You surely mean i = 0? Also what exactly do you mean by "it does not run through"? TypeScript code has to be compiled to JavaScript first, so did you get an error here? What has debugging shown you? — UnholySheep
– UnholySheep, Commented Jul 23, 2017 at 13:59
Also why are you declaring i as any? It's pretty clearly a number here — UnholySheep
– UnholySheep, Commented Jul 23, 2017 at 14:01
@UnholySheep Hi, sorry I put any just to test. for debugging, i use console.log() before the for loop and within the for loop. the console.log before runs on console but the console.logwithin did not appear — aaa
– aaa, Commented Jul 23, 2017 at 14:18
It did not shown any error in the console, but when I tried the for(i=0;), there's no info-window shown. While when I tried with the for(let a of b), the info-window appears. However it appeared 4 times (I had 4 rows of data) and overlay with one another. — aaa
– aaa, Commented Jul 23, 2017 at 14:24
How are you getting storeData? If it's asynchronously with http, that could be the issue. try doing a console.log before for with storeData.length.. — JGFMK
– JGFMK, Commented Jul 23, 2017 at 16:57

ashley · Accepted Answer · 2017-07-23 17:35:44Z

2

Hello why mixing html in the ts? maybe you have a specific reason for doing this but I don't think this is the way you want to go with angular. I would prefer this way by defining that html in a component with input parameters which can be reusable and testable. I am just putting the bare code. if you need additional help, you can ask.

create a component as follows:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'info-window',
  templateUrl: './component.html',
  styleUrls: ['./component.css']
})
export class InfoWindowComponent implements OnInit {

  @Input('title') listingTitle :string;
  @Input('date') datePosted :string;
  @Input('time') listingTime :string;
  constructor() { }

  ngOnInit() {
  }

}

The corresponding html is as follows:

<ion-item> 
     <h2 style="color:red;">{{listingTitle}}</h2> 
     <p>{{datePosted}} {{listingTime}}</p>
</ion-item>

then in your other component where you need to use the above component. See the TS below //guess storedata is an array

private storeData: infowindowData[];

your template can be follows. You can decide what to do with the index. You can create an additional input parameter in the component and pass it there. Any additional logic for that component can be done there as well in OnInit.

<li *ngFor="let infoWindow of storeData; let index = index">
  <info-window [title]=infoWindow.ListingTitle
[date]=infoWindow.ListingDatePosted [time]=infoWindow.ListingTime></info-window>
</li>

Hope that helps. Ashley

answered Jul 23, 2017 at 17:35

ashley

1,03820 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aaa Over a year ago

Sorry, because I trying to add infowindow content to the markers. I learn this at Google Map Doc. Do you have any example of other approach for me to learn?

ashley Over a year ago

There are some angular 2 google maps component. angular-maps.com. I have used them once in an ionic projet to display markers on a google map. Hope this helps you.

JGFMK Over a year ago

Since @ChingChongPa wants index in there too, add {{index}} inside the <li> then I it looks good to go from me...

Collectives™ on Stack Overflow

angular 2/ionic 2 - for loop in ts

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related