ngModel不以离子4模态结合

问题描述 投票:0回答:1

HTML:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="cancelNewMsg()">
        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>
      New Messsage
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item-divider>
    <ion-label> SEND NEW MESSAGE</ion-label>
  </ion-item-divider>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-item lines="full">
          <ion-label position="floating">Message</ion-label>
          <ion-textarea [(ngModel)]="message" auto-grow="true" maxlength="2000"></ion-textarea>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
          <ion-button expand="block" color="default" (click)="cancelNewMsg()">Cancel</ion-button>
      </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="12">
        <ion-button expand="block" color="default" (click)="sendMsg()">Send</ion-button>
    </ion-col>
</ion-row>
  </ion-grid>
</ion-content>

TS:

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

@Component({
  selector: 'app-conv-new-msg-modal',
  templateUrl: './conv-new-msg-modal.component.html',
  styleUrls: ['./conv-new-msg-modal.component.scss']
})
export class ConvNewMsgModalComponent implements OnInit {
  message = '';

  submitAttempt = false;

  constructor(private modal: ModalController) {}

  ngOnInit() {
  }

  sendMsg() {
    this.submitAttempt = true;
    console.log(this.message);
  }

  cancelNewMsg() {
    this.modal.dismiss();
  }
}

打开模式的页面:

  async newMessage() {
    // Opens conv-new-msg-modal.component.html
    const modal = await this.modal.create({
      component: ConvNewMsgModalComponent,
    });

    modal.onDidDismiss().then(data => {
      console.log(data);
    },
    err => {

    });

    return await modal.present();
  }

不确定我在这里缺少什么,但是当我运行命令ionic cordova run android时它会运行。我在该字段中输入一些文本,然后单击“发送”以查看console.log(this.message)是否会打印出该值,但不会打印出来,它只是一个空变量。

当我单击发送按钮以显示数据时,控制台上没有出现错误。我也在物理设备上运行它。

angular ionic-framework angular-ngmodel
1个回答
0
投票
然后您可以从结果中获取数据。

modal.onDidDismiss().then((result: object) => { if (result['data']) { console.log(result['data']); // = this.message value } });

© www.soinside.com 2019 - 2024. All rights reserved.