Question

我有一个页面显示我的应用程序中的用户列表。但是，该页面有一个弹出窗口，该弹出窗口与用户保持一定距离，并尝试根据该距离更改列表。问题在于，一旦选择了新距离，就什么也不会发生。我如何用新数据重新加载此页面。 api调用运行良好，因为我可以看到新对象和新用户的console.log。

changeLocationComponent（弹出框）

   changeLoc() {
        console.log('Get slider value');
        console.log(this.distance);
        this.viewService.viewPatient1(this.distance).subscribe((res: any) => {
          console.log('Distance', this.distance);
          if (!res) {
            console.log('No Patients');
          } else {
          console.log('Result');
          console.log(res.patients.data);
          this.patients = res.patients.data;
          // this.router.navigate(['view-patient']);
          this.navCtrl.navigateForward('/view-patient');
        //  this.ref.detectChanges();
        }
        });

Patients-page.ts

ngOnInit() {
  }

  ionViewWillEnter() {
    this.viewPatients();
  }

  viewPatients() {
  this.viewService.viewPatient().subscribe((res: any) => {
    if (!res) {
      console.log('No Patients');
    } else {
    this.patients = res.patients.data;
  }
  });
  }

  async notifications(ev: any) {
    const popover = await this.popoverCtrl.create({
        component: NotificationsComponent,
        event: ev,
        animated: true,
        showBackdrop: true,
        cssClass: 'pop-over-style',
    });
    return await popover.present();
}

Answer 1

您需要dismiss弹出框来发送已更改的数据。您可以从http调用viewService取回患者数据。因此，您需要将该数据传递回原始页面。

changeLoc() {
  // your code here or create a button to close the popover
 this.popoverController.dismiss(this.patients);
}

在“患者”页面上，您需要收集刚刚解雇的数据。您会收到OverlayEventDetail作为Popover的回复。这是在https://beta.ionicframework.com/docs/api/popover文档中定义的。您发送的数据存储在返回的变量patients中，该变量有一个data对象（您可以console.log（）自己查看）。然后将该信息分配回页面上的变量。

async notifications(ev: any) {
  const popover = await this.popoverCtrl.create({
      component: NotificationsComponent,
      event: ev,
      animated: true,
      showBackdrop: true,
      cssClass: 'pop-over-style',
  });
  popover.onDidDismiss().then(patients => {
    if (patients) {
      this.patients = patients.data
    }
  });
  return await popover.present();
}

发送新数据时重新加载页面Ionic 4

1 个答案: