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

Question

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

changeLocationComponent(popover)

   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();
        }
        });

患者-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弹出框来发送更改后的数据。您从对 viewService 的 http 调用中获取患者数据。因此，您需要将该数据传回原始页面。

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

在 patients-page 您需要收集刚刚关闭的数据。您将收到 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

Reload a page when new data is sent Ionic 4

popover

ionic-framework

angular