一旦提交按钮在离子中成功，如何隐藏 Modal1 并显示 Modal2？

Question

我有这个调查应用程序，用户回答了调查表，完成后，he/she 需要点击按钮 提交反馈 并且会显示 反馈提交成功。调查表在模态(Modal1)内。我想显示(Modal2) "Feedback submitted successfully" 一旦响应成功。但是问题是，由于我是新手 Ionic 我不知道如何执行它。我在 Stack overflow 中看到了一些可以使用 *ngIf 的解决方案，但我对如何做有点困惑。我尝试一点一点地添加代码。这是我的代码供您参考。希望您能帮帮我。

.html

   //Modal 1

    <ion-content class="ion-text-left ion-padding">
      <div>
       <ion-text><h2><b>Provide feedback</b></h2></ion-text>
         <h4><p>You are giving feedback on the
          following appointment:</p></h4>
  
      <ion-text>Provider name</ion-text>
       <br><ion-label>{{selectedAppointment.providerName}}</ion-label>
       <br>
      <ion-text>Specialty</ion-text>
      <br><ion-label>{{selectedAppointment.specialty}}</ion-label>
      <br>
      <ion-text>Patient name</ion-text>
      <br><ion-label>{{selectedAppointment.patientName}}</ion-label>
     <br>
     <ion-text>Date of appointment</ion-text>
     <br><ion-label>{{selectedAppointment.date | date:'MMM dd,yyyy'}}</ion-label>

 <ion-item></ion-item>
 <br>
 <ion-row>
  <ion-col>
    <ion-text>Please answer the following questions and submit your feedback</ion-text>
  </ion-col>
</ion-row>
<ion-row>
  <ion-col>
  <p class = "question">Who was your treating physician?</p> 
  </ion-col>
</ion-row>


<ion-row>
  <ion-col size-md = "12">
    <ion-item lines = "none">
      <ion-input placeholder="Enter name here"  [(ngModel)]="postFeedback.nameOfPhysician"></ion-input>
    </ion-item>
  </ion-col>
</ion-row>
</div>

 <ion-grid>
       <ion-row>  
      //Trying to execute *ngIf here
         <ion-col *ngIf="!feedbackMode">
            <ion-button icon-end expand ="full" shape = "round" size = "large" color="primary" (click)="onSubmitFeedback()">Submit Feedback!</ion-button>
         </ion-col>
        </ion-row> 
         <ion-row>
 <ion-col>
  <ion-button class = "cancel" icon-end expand = "full" shape = "round" size = "large"  fill="outline" color="primary" (click)="onCancel()">
Cancel</ion-button>  
      </ion-col>
     </ion-row>
   </ion-grid>
 </ion-content>

Modal 2应该提示“反馈提交成功”。

.ts

export class AppointmentSubmitFeedbackComponent implements OnInit {

         feedbackMode: Boolean = false;

    onFeedbackMode(feedbackMode: Boolean) {
      this.feedbackMode = feedbackMode;
    }


     onSubmitFeedback() {
        this.postFeedback.caseId = this.selectedAppointment.caseId;
        this.postFeedback.providerCity = this.selectedAppointment.providerCity;
        this.postFeedback.providerCountry = this.selectedAppointment.providerCountry;
        console.log(this.postFeedback);
        let feedbackServ = this.feedbackServ.postFeedback(this.postFeedback);
        feedbackServ.then(response => {
        console.log('response : ', response);


        }).catch(error => {
        console.log('errProfile: ', error);
        })
         this.modalController.dismiss(
          {message: "This is dummy message"},
            'confirm'
           );
          }

Answer 1

您可以在 API 响应中使用关闭功能关闭模态 1，然后调用第二个模态：

this.modalCtrl.dismiss({  // this will dismiss current open modal i.e: Modal 1
   'dismissed': true
});
this.openThanksModal();  // open Thanks modal after dismissing Modal 1

Answer 2

使用模态调用离子上的另一个模型有一些注意事项。由于第一个模式将在显示第二个模式之前被销毁。我看到了 3 个备选方案：

使用模态父页面上的逻辑控制第二个模态。
正在使用 *ngIf 更改当前模式的布局。
使用警报显示“感谢”消息。

从用户体验的角度来看，我会做 #3，因为最好显示带或不带选择操作的提醒短消息。

#1。当第一个模态被关闭时显示另一个模态

在您的父页面中您称之为 AppointmentSubmitFeedbackComponent 的部分


const modal = await this.modalCtrl.create({ component: AppointmentSubmitFeedbackComponent })

modal.onDidDismiss().then(async (dismissResult) => {
  //this will contain the object returned when the modal dismisses itself
  const returnedData = dismissResult.data 
  
  if(returnedData.success === true) {
    //show the second modal
    const modal = await this.modalCtrl.create({ component: ThanksModalComponent })
    await modal.present()
  } else {
    // show error
  }

在您的约会中提交反馈组件
记得在构造函数上声明 modalCtrl

onSubmitFeedback() {
  this.postFeedback.caseId = this.selectedAppointment.caseId;
  this.postFeedback.providerCity = this.selectedAppointment.providerCity;
  this.postFeedback.providerCountry = this.selectedAppointment.providerCountry;
  console.log(this.postFeedback);
  let feedbackServ = this.feedbackServ.postFeedback(this.postFeedback);
  feedbackServ.then(response => {
    console.log('response : ', response);
    
    this.modalCtrl.dismiss({ success: true })
  }).catch(error => {
    console.log('errProfile: ', error);

    this.modalCtrl.dismiss({ success: false })
  })
}

#2。使用 *ngIf-else

预约-提交-feedback.component.html

<ion-content *ngIf="!submitted; else thanksContent" class="ion-text-left ion-padding">
  <div>
    <ion-text>
      <h2><b>Provide feedback</b></h2>
    </ion-text>
    <h4>
      <p>You are giving feedback on the
        following appointment:</p>
    </h4>

    <ion-text>Provider name</ion-text>
    <br>
    <ion-label>{{selectedAppointment.providerName}}</ion-label>
    <br>
    <ion-text>Specialty</ion-text>
    <br>
    <ion-label>{{selectedAppointment.specialty}}</ion-label>
    <br>
    <ion-text>Patient name</ion-text>
    <br>
    <ion-label>{{selectedAppointment.patientName}}</ion-label>
    <br>
    <ion-text>Date of appointment</ion-text>
    <br>
    <ion-label>{{selectedAppointment.date | date:'MMM dd,yyyy'}}</ion-label>

    <ion-item></ion-item>
    <br>
    <ion-row>
      <ion-col>
        <ion-text>Please answer the following questions and submit your feedback</ion-text>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <p class="question">Who was your treating physician?</p>
      </ion-col>
    </ion-row>


    <ion-row>
      <ion-col size-md="12">
        <ion-item lines="none">
          <ion-input placeholder="Enter name here" [(ngModel)]="postFeedback.nameOfPhysician"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
  </div>

  <ion-grid>
    <ion-row>
      //Trying to execute *ngIf here
      <ion-col *ngIf="!feedbackMode">
        <ion-button icon-end expand="full" shape="round" size="large" color="primary" (click)="onSubmitFeedback()">
          Submit Feedback!</ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-button class="cancel" icon-end expand="full" shape="round" size="large" fill="outline" color="primary"
          (click)="onCancel()">
          Cancel</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

<ng-template #thanksContent>
  <ion-row>
    <ion-col class="ion-text-center">
      Thanks for your submission!
    </ion-col>
  </ion-row> 
  <ion-row>
    <ion-col>
      <ion-button icon-end expand="full" shape="round" size="large" fill="outline" color="primary"
          (click)="closeModal()">
        OK
      </ion-button>
    </ion-col>
  </ion-row>
</ng-template>

预约-提交-feedback.component.ts

submitted = false

closeModal() {
  this.modalCtrl.dismiss()
}

onSubmitFeedback() {
  this.postFeedback.caseId = this.selectedAppointment.caseId;
  this.postFeedback.providerCity = this.selectedAppointment.providerCity;
  this.postFeedback.providerCountry = this.selectedAppointment.providerCountry;
  console.log(this.postFeedback);
  let feedbackServ = this.feedbackServ.postFeedback(this.postFeedback);
  feedbackServ.then(response => {
    console.log('response : ', response);
    this.submitted = true
  }).catch(error => {
    console.log('errProfile: ', error);
    this.submitted = true
  })
}

#3.

预约-提交-feedback.component.ts

//declare the alertCtrl in the constructor
constructor( //...
  private alertCtrl: AlertController,
  // ...
)
onSubmitFeedback() {
  this.postFeedback.caseId = this.selectedAppointment.caseId;
  this.postFeedback.providerCity = this.selectedAppointment.providerCity;
  this.postFeedback.providerCountry = this.selectedAppointment.providerCountry;
  console.log(this.postFeedback);
  let feedbackServ = this.feedbackServ.postFeedback(this.postFeedback);
  feedbackServ.then(async (response) => {
    console.log('response : ', response);
    this.showThanksAlert()
  }).catch(error => {
    console.log('errProfile: ', error);
  })
}

showThanksAlert() {
  const alert = await this.alertCtrl.create({
    message: 'Thanks for your submission',
    buttons: [ 
      {
        text: 'Ok',
        handler: () => {
          this.modalCtrl.dismiss()
        }
      }
    ]
  })
  await alert.present()
}

一旦提交按钮在离子中成功，如何隐藏 Modal1 并显示 Modal2？

How to hide Modal1 and show Modal2 once the submit button is successful in ionic?

javascript

css

modal-dialog

ionic-framework

angular

#1。当第一个模态被关闭时显示另一个模态

#2。使用 *ngIf-else

#3.