javascript - Ionic 4 Angular: Uncaught ReferenceError: dismissModal is not defined at HTMLElement.onclick (BUT function IS defin

admin管理员组

文章数量:1316616

Error: Uncaught ReferenceError: dismissModal is not defined at HTMLElement.onclick

Match-Summary-Modalponent.html

<ion-header translucent>
  <ion-toolbar>
    <ion-title>Match Summary</ion-title>
    <ion-buttons slot="end">
      <ion-button onclick="dismissModal()">Return to Queue Page</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card>
    <ion-card-content>This match you had a score of {{score}}</ion-card-content>
    <ion-card-content>And a place of {{place}} out of {{playerCount}} players</ion-card-content>
  </ion-card>
</ion-content>

Match-Summary-Modalponent.ts

import { Component, OnInit, Input} from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-match-summary-modal',
  templateUrl: './match-summary-modalponent.html',
  styleUrls: ['./match-summary-modalponent.scss'],
})
export class MatchSummaryModalComponent implements OnInit {
  @Input() score: number;
  @Input() place: number;
  @Input() playerCount: number;


  constructor(private modalController: ModalController) {

   }

  ngOnInit() {}

  async dismissModal() {
    this.modalController.dismiss()
  }

}

GameNetworkService.ts (somewhere within the service, with modalController injected)

this.lobbyServerSocket.on('match-summary', async (summarydata) => {
        let modal = await this.modalController.create({
          ponent: MatchSummaryModalComponent,
          ponentProps: {
            score: summarydata.score,
            place: summarydata.place,
            playerCount: summarydata.playerCount
          }
        })
        await modal.present()
        this.lobbyServerSocket.disconnect(true)
        this.lobbyServerSocket = null;
      })

Question When dismissModal() is clearly defined within MatchSummaryModal, why is angular/ionic unable to find the dismissModal() method that is quite clearly called & contained within the ponent when the button is clicked?

Additionally, what do I need to do to get the intended functionality? (Which is to make the modal dismiss itself on button click)

Thank you!

Error: Uncaught ReferenceError: dismissModal is not defined at HTMLElement.onclick

Match-Summary-Modal.ponent.html

<ion-header translucent>
  <ion-toolbar>
    <ion-title>Match Summary</ion-title>
    <ion-buttons slot="end">
      <ion-button onclick="dismissModal()">Return to Queue Page</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card>
    <ion-card-content>This match you had a score of {{score}}</ion-card-content>
    <ion-card-content>And a place of {{place}} out of {{playerCount}} players</ion-card-content>
  </ion-card>
</ion-content>

Match-Summary-Modal.ponent.ts

import { Component, OnInit, Input} from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-match-summary-modal',
  templateUrl: './match-summary-modal.ponent.html',
  styleUrls: ['./match-summary-modal.ponent.scss'],
})
export class MatchSummaryModalComponent implements OnInit {
  @Input() score: number;
  @Input() place: number;
  @Input() playerCount: number;


  constructor(private modalController: ModalController) {

   }

  ngOnInit() {}

  async dismissModal() {
    this.modalController.dismiss()
  }

}

GameNetworkService.ts (somewhere within the service, with modalController injected)

this.lobbyServerSocket.on('match-summary', async (summarydata) => {
        let modal = await this.modalController.create({
          ponent: MatchSummaryModalComponent,
          ponentProps: {
            score: summarydata.score,
            place: summarydata.place,
            playerCount: summarydata.playerCount
          }
        })
        await modal.present()
        this.lobbyServerSocket.disconnect(true)
        this.lobbyServerSocket = null;
      })

Question When dismissModal() is clearly defined within MatchSummaryModal, why is angular/ionic unable to find the dismissModal() method that is quite clearly called & contained within the ponent when the button is clicked?

Additionally, what do I need to do to get the intended functionality? (Which is to make the modal dismiss itself on button click)

Thank you!

• javascript
• angular
• ionic-framework
• ionic4

Share Improve this question Follow edited Jan 5, 2020 at 8:55 kushal shah 86366 silver badges99 bronze badges asked Jan 5, 2020 at 7:41 Michael HeynMichael Heyn 5366 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

It should be

<ion-button (click)="dismissModal()">Return to Queue Page</ion-button>

instead of

<ion-button onclick="dismissModal()">Return to Queue Page</ion-button>

本文标签：