Angular Ionic - Why doesn't click method work?

Question

Angular 2 & Ionic 3

Project Structure (code below image)

I defined a custom click method in the home.ts file that is supposed to be triggered by a button in the home.html file.

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 2 Basics
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="onGoToUsrs">Users</button>
</ion-content>

home.ts

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

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

export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  onGoToUsrs() {
    this.navCtrl.push(UsersPage);
  }

}

The home page appears in the browser as expected, button included. The button is clickable, but triggers nothing when clicked. There are no errors in the console. I tried to run a console.log() in the click method but it did not run, hopefully that detail helps.

I've tried restarting the server after making changes.

Why doesn't the button trigger the custom click method?

Answer 1

你的 onGoToUsrs 需要 () 来调用函数

<button ion-button (click)="onGoToUsrs()">Users</button>

Answer 2

There is an error on your code in template file.

    <button ion-button (click)="onGoToUsrs">Users</button>

It Should be -

    <button ion-button (click)="onGoToUsrs()">Users</button>