Question

divs: any[] = [
{name: 'Petit déjeuner',key:'v1',image:'oasis/petit_dej.svg',action:'goToPage1()'},
{name: 'Entrées', key: 'v2',image:'oasis/entres.svg',action:'goToPage2()' },
  ];

<ion-grid>
                <ion-row>
                        <ion-col col-4 *ngFor="let div of divs; let i=index">
                                <div *ngIf="i<3" class="service-utilise" >
                                        <img class="service-img" src="assets/imgs/{{div.image}}" click="{{div.action}}"  />
                                        <p>{{ div.name }}</p>
                                </div>`enter code here`
                        </ion-col>
                </ion-row>
        </ion-grid>

Answer 1

您需要执行以下操作。在这里，我为按钮分配了一个（单击），它调用的方法将创建一个警报框。

TS文件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController) {


}

DoSomething(){
alert("It WORKS!");

  }
}

HTML文件

<ion-header>
<ion-navbar>
<ion-title>
  Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<button ion-button (click)="DoSomething()">Default</button>
</ion-content>

Answer 2

首先，您必须在 .ts 文件中添加一个功能；像例子一样；

testFunction(action){
 console.log(action);
}

和

 <img class="service-img" src="assets/imgs/{{div.image}}" click="testFunction(div.action)"  />

您好，如何在离子中使用（click）=“ {{}}”

2 个答案: