Ionic / Angular нажатие кнопки: ctx.xxx не является функцией - PullRequest
Новая
       187

Ionic / Angular нажатие кнопки: ctx.xxx не является функцией

0 голосов
/ 07 августа 2020

Мы пытаемся получить модальное окно Ioni c, которое будет отображаться всякий раз, когда мы нажимаем кнопку. Мы следуем документации для модального окна Ioni c Framework (v5). (https://ionicframework.com/docs/api/modal)

домашняя страница. html

<app-header title="Home"></app-header>

<ion-content [fullscreen]="true">
  <div class="ion-text-center center-vertical">
    <ion-icon class="icon-xl" name="bluetooth"></ion-icon>
    <h3>Not connected</h3>
  </div>

  <ion-fab vertical="center" horizontal="center" slot="fixed" class="ion-text-center">
    <ion-fab-button (click)="showDevices()">
      <ion-icon name="bluetooth"></ion-icon>
    </ion-fab-button>
    <small>Connect</small>
  </ion-fab>
</ion-content>

home.module.ts 

import { IonicModule,  } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { ModalController } from '@ionic/angular';

import { HomePageRoutingModule } from './home-routing.module';
import { HeaderComponent } from '../header/header.component';
import { DevicesComponent } from '../devices/devices.component';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    HomePageRoutingModule
  ],
  entryComponents: [HeaderComponent],
  declarations: [HomePage, HeaderComponent]
})
export class HomePageModule {
  constructor(public modalController: ModalController) { }

  public async showDevices() {
    const modal = await this.modalController.create({
      component: DevicesComponent
    });
    return await modal.present();
  }
}

Когда мы нажимаем на кнопку, мы получаем следующую ошибку: 

core.js:6241 ERROR TypeError: ctx.showDevices is not a function
    at HomePage_Template_ion_fab_button_click_7_listener (template.html:10)
    at executeListenerWithErrorHandling (core.js:21819)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21861)
    at HTMLElement.<anonymous> (platform-browser.js:976)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41645)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)
    at invokeTask (zone-evergreen.js:1621)

Кто-нибудь знает? Тип showDevices () - это Promise, но Angular должен уметь обрабатывать это, верно? Мы также пытались добавить «это» в качестве префикса, но ошибка осталась. Спасибо!

1 Ответ

0 голосов
/ 07 августа 2020

Вздох .. Мы помещаем код в наш модуль вместо нашего компонента. Проблема решена, спасибо Сергей!

...