Ionic 4从模态传回数据未定义

Posted 2023-02-23

【中文标题】Ionic 4从模态传回数据未定义

【英文标题】：Ionic 4 Pass Data BACK from Modal undefined

【发布时间】：2019-03-01 19:42:45

【问题描述】：

我正在尝试创建一个模态窗口，将它传递给一个单选组，当用户从该单选组中选择一个值时，然后让我的模态传回他们选择的对象。

广播组页面和html

  export class PopoverstationsPage implements OnInit 

      cities :any

      constructor(public nav : NavController,public nav : NavController,public modalController: ModalController ,public router : Route)  

      ngOnInit() 
        console.log(this.cities)
      

      onRadioChange(cities: PopoverstationsPage):void 
    this.modalController.dismiss(cities);

      console.log(this.cities)
  

    

html

<ion-list>
        <ion-radio-group (ionChange)="onRadioChange()" [(ngModel)]="cities">
            <ion-list-header>
                <ion-label>Name</ion-label>
            </ion-list-header>

            <ion-item>
                <ion-label>ميناء خصب</ion-label>
                <ion-radio slot="start" value="26.2105,56.244" ></ion-radio>
            </ion-item>

            <ion-item>
                <ion-label>مطار خصب</ion-label>
                <ion-radio slot="start" value="26.161722,56.23672"></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>دبا</ion-label>
                <ion-radio slot="start" value="25.615627,56.247322"></ion-radio>
            </ion-item>
            <ion-item>
                <ion-label>البريمي</ion-label>
                <ion-radio slot="start" value="24.233913,55.916176"></ion-radio>
            </ion-item>

        </ion-radio-group>
  </ion-list>

首页接收上面表单页面的值，然后在另一个函数中使用它

     export class HomePage implements OnInit 

              cities :any

              constructor(public nav : NavController,public modalController: ModalController)  

              ngOnInit() 
                console.log(this.cities)
              

            async openUserModal() 
           const modal = await this.modalController.create(
         component: PopoverstationsPage,
        componentProps:  cities: this.cities ,
      );

      modal.onDidDismiss()
        .then((data) => 
          const user = data['cities']; // Here's your selected user!
          console.log(user)
      );

      return await modal.present();
    


async test ()

  this.https.get('weather/'+this.cities+'.json')
  .subscribe(data => 

    this.weather = data

  )




 

我在控制台日志中遇到错误undefined

【问题讨论】：

您是否尝试过使用ViewController 关闭模式？

否，需要modalController

您真的阅读过文档吗？它向您展示了如何做到这一点：ionicframework.com/docs/api/modal

您应该可以使用 ViewController 作为选项，而且您的 ModalController 构造函数中似乎缺少 ModalController 声明

它更小，但我不知道问题出在哪里@AJT_82

【参考方案1】：

此代码在 Ionic 4 中运行。

async presentModal() 
  let showModal = await this.modalCtrl.create(
    component: ModalPagePage,
    componentProps: 
      selectedDay: this.selectedDay
    
  );
  await showModal.present();

  const  data  = await showModal.onDidDismiss();
  console.log("data is  " + data);
  if (data) 
    let eventData = data;
  

【讨论】：

在我的 Ionic 4 应用程序中效果很好。

【参考方案2】：

在您的onDidDismiss 处理程序中，您正在注销data['cities']，但您在模式中返回String。这意味着您正在查询String 类型上的cities 属性，这是一个Object - 这就是它返回undefined 并且不引发错误的原因。应该通过以下方式解决。

 const user = data;
 console.log(user)

【讨论】：

您可以将其分配给this.cities = data，然后调用您的test 方法。如果您需要更多详细信息，请接受答案并提出不同的问题。

好吧他的返回值，但我仍然有问题在我的网址中使用返回值!!!

当我尝试打印时this.cities = data 我得到了[object Object]

我很抱歉他不工作我得到[object Object] 我无法接受答案