angular 2/ionic 2 - for ts 中的循环

Question

我想将 index 分配给 content，以便根据它们的 index 将信息窗口添加到标记。

console.log(storeData.length) 将 returns 4 行数据。

现在，两种方法returns我的结果相同，4 个信息窗口相互重叠。我似乎有很多examples，但是我不知道如何实现到我的代码中。特别是 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);

}

我试过的

 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);
 });

 }

Answer 1

你好为什么在ts里混入html？也许您有这样做的特定原因，但我认为这不是您想要使用 angular 的方式。我更喜欢这种方式，通过在具有可重用和可测试的输入参数的组件中定义 html 。我只是把裸代码。如果您需要其他帮助，可以询问。

创建组件如下：

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() {
  }

}

对应的html如下：

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

然后在你需要使用上述组件的其他组件中。看下面的TS //猜测storedata是一个数组

private storeData: infowindowData[];

您的模板可以遵循。您可以决定如何处理索引。您可以在组件中创建一个额外的输入参数并将其传递到那里。该组件的任何其他逻辑也可以在 OnInit 中完成。

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

希望对您有所帮助。阿什莉

angular 2/ionic 2 - for ts 中的循环

angular 2/ionic 2 - for loop in ts

javascript

typescript

ngfor

angular