ionic2-list

//下面是list使用  html頁面
<ion-list>
		<ion-item *ngFor="let contact of contacts" (click)="itemClick($event,contact)">
			<ion-avatar item-left>
				<img src="../images/{{contact.contactid}}.png" alt="">
		    </ion-avatar>
		<h2>{{contact.contactname}}</h2>
		<p>{{contact.contacttext}}</p>
		</ion-item>
</ion-list>

// 經測試上面的(click)="itemClick($event,contact)" 去掉美圓符號$ 也行
(click)="itemClick(event,contact)"  也能夠把event去掉,ts裏面對應的event也去掉
//ts 文件
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/about/about.html'
})
export class AboutPage {
  //contacts = [];
  constructor(private navCtrl: NavController) {
    this.contacts =[
          {"contactid":1,"contactname":"張三","contacttext":"13123451388"},
          {"contactid":2,"contactname":"張想","contacttext":"13123451388"},
          {"contactid":3,"contactname":"Sam","contacttext":"131233333333"},
          {"contactid":4,"contactname":"Jane","contacttext":"13123422221"},
          {"contactid":5,"contactname":"Cary","contacttext":"13123451322"},
          {"contactid":6,"contactname":"Kate","contacttext":"13123451388"},
      ]
  }

  itemClick(event,contact){
    alert(contact.contactname);//點擊每一個記錄彈出聯繫人名稱
  }
本站公眾號
   歡迎關注本站公眾號,獲取更多信息