角2 /離子2-用於ts中的循環

Question

我想為content分配index ，以便根據標記的index向標記添加信息窗口。

console.log(storeData.length)將返回4行數據。

現在，這兩種方法都返回了相同的結果，彼此重疊了4個信息窗口。 我似乎有很多示例 ，但是我不知道如何實現我的代碼。 特別是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？ 也許您有這樣做的特定原因，但我不認為這是您想要采用角度的方式。 我更喜歡這種方式，方法是在組件中使用可重用和可測試的輸入參數定義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 //猜測的storageata是一個數組

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>

希望能有所幫助。 阿什利