検索したものをクリックして特定のURLにアクセスさせる

“ionicでAjax通信を用いて検索リストを表示する(https://hacknote.jp/archives/30088/)”の続きです。

まずクリックイベントの指定はhtmlファイルにて

<ion-content padding>
  <ion-list>
      <ion-item *ngFor="let data of datas"  (click)=itemSelected(data.url)>
        {{ data.name }}
      </ion-item>
    </ion-list>
</ion-content>

の(click)=で指定します。その中のitemSelected(data.url)はtsファイルから

 itemSelected(urls) {
       window.location.href=urls;
  }

と指定してあげます。リストにのる名前と検索するurlは同様にtsファイルにて

 this.datas=[];
   for(var n=0;n<homepage.length;n++){
    this.datas[n] = {"url": homepage[n], "name": name[n]};
    }

で名前とurlを並列させて配列を定義します。これによって、

*ngFor="let data of datas" 

の繰り返し処理が名前とurlの両方に活きて、リストの名前に沿ったurlにアクセスできるようになります。