Question

file.html中的代码是

<button ion-button item-right>
        <ion-icon name="md-add-circle" (click)="save();"></ion-icon>
      </button>

file.ts

editmode = false;

我想要实现的是如果editmode为假，则调用save()函数，如果editmode为true，则在单击html页面的按钮时调用editedu(elem,index)函数

请指导

Answer 1

你可以使用三元if（或者你可以调用一种方法，根据editmode调用另一种方法）

(click)="editmode ? save() : editedu(elem, index)"

Answer 2

使用

<button ion-button item-right>
 <div *ngIf="editmode">     
<ion-icon name="md-add-circle" (click)="editedu(elem,index);"></ion-icon>
</div>
 <div *ngIf="!editmode">     
<ion-icon name="md-add-circle" (click)="save();"></ion-icon>
</div>
</button>

如果你想用单行做，

<div   *ngIf=editmode ? save() : editedu(elem, index)">
   <ion-icon name="md-add-circle" (click)="save();"></ion-icon>
</div>

Answer 3

请参阅plunker演示 https://plnkr.co/edit/X5e6avkveGeVRqhzLVFr?p=preview

 //our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 (click)='editMode = !editMode'>Toggle editMode {{editMode}}</h2>
      <button (click)='editMode? save(): ""'>Call Me</button>
    </div>
  `,
})
export class App {
  name:string
  editMode: boolean = true;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  save(): void {
    alert("Called because editMode is true");
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

如何根据变量的值使用ngIf？

3 个答案: