如何根據用戶輸入顯示toast訊息？

我很難顯示特定的條件訊息。我對每個問題都有“是”或“否”單選按鈕的問題，所以如果用戶對所有問題回答“是”，他們會收到一條訊息，說他們可以申請。如果他們回答任何問題“否”，他們會收到一條訊息，說“沒有資格申請”。如何檢查用戶是否回答“否”并顯示適當的訊息。

我最近開始使用 Ionic-Angular，所以任何指導都會有所幫助。

調查.page.html

<ion-card>
    <ion-card-header>
      <ion-card-subtitle><p>Find out if you can apply</p></ion-card-subtitle>
    </ion-card-header>

<ion-card-content>
  <ion-list>
    <ion-radio-group value="age">
      <ion-list-header>
        <ion-label>Are you 20 - 45 of age?</ion-label>
      </ion-list-header>

      <ion-item>
        <ion-label>Yes</ion-label>
        <ion-radio value="yes" ></ion-radio>
      </ion-item>

      <ion-item>
        <ion-label>No</ion-label>
        <ion-radio value="No" ></ion-radio>
      </ion-item>
    </ion-radio-group>

    <ion-radio-group value="job-search">
      <ion-list-header>
        <ion-label>Are you currently looking for work?</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>Yes</ion-label>
        <ion-radio value="yes"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>No</ion-label>
        <ion-radio value="No"></ion-radio>
      </ion-item>
    </ion-radio-group>
</ion-list>

    <ion-button type="button" (click)= "displayMessage()" >Can I apply?</ion-button>

 </ion-card-content>
 </ion-card>

調查.page.ts

import { Component, OnInit } from '@angular/core';
import { ToastController } from '@ionic/angular';
import  {FormControl } from '@angular/forms';


@Component({
  selector: 'app-survey',
  templateUrl: './survey.page.html',
  styleUrls: ['./survey.page.scss'],
})
export class survey implements OnInit {

  constructor(public toastController: ToastController) { }

  ngOnInit() {
  }

  async displayMessage() {

    if ('No') {
      const toast1 = await this.toastController.create({
        message: `You are not eligible to apply`,
        duration: 2000,
        position: 'middle',
      });
      toast1.present();
    }else{
      const toast2 = await this.toastController.create({
        message: `You can apply`,
        duration: 2000,
        position: 'middle',
      });
      toast2.present();

    }

  }
}

這是我編輯的survey.page.ts 檔案

export class survey  {

//gave it a type string due to errors
  radio1: string;
  radio2: string;


  constructor(public toastController: ToastController) { }


   onRadio1Change(event: any){
    this.radio1 = event.target.value;
    console.log(this.radio1);
  }

onRadio2Change(event: any){
    this.radio2 = event.target.value;
    console.log(this.radio2);
  }

  async displayMessage() {

    if (this.radio1 == "yes" && this.radio2 =="yes") {
      const toast1 = await this.toastController.create({
        message: `You can apply`,
        duration: 2000,
        position: 'middle',
      });
      toast1.present();
    }
else{
      const toast2 = await this.toastController.create({
        message: `You are not eligible to apply`,
        duration: 2000,
        position: 'middle',
      });
      toast2.present();

    }

  }
}

uj5u.com熱心網友回復：

在您的 HTML 上執行此操作：

<ion-radio-group value="age" (change)="onRadio1Change($event)">
      <ion-list-header>
        <ion-label>Are you 20 - 45 of age?</ion-label>
      </ion-list-header>

      <ion-item>
        <ion-label>Yes</ion-label>
        <ion-radio value="yes" ></ion-radio>
      </ion-item>

      <ion-item>
        <ion-label>No</ion-label>
        <ion-radio value="No" ></ion-radio>
      </ion-item>
    </ion-radio-group>

 <ion-radio-group value="job-search" (change)="onRadio2Change($event)">
      <ion-list-header>
        <ion-label>Are you currently looking for work?</ion-label>
      </ion-list-header>
      <ion-item>
        <ion-label>Yes</ion-label>
        <ion-radio value="yes"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>No</ion-label>
        <ion-radio value="No"></ion-radio>
      </ion-item>
    </ion-radio-group>

然后在你的 .ts 檔案上，

onRadio1Change(event:any){
    this.radio1 = event.target.value; 
    console.log(this.radio1)
  }

onRadio2Change(event:any){
    this.radio2 = event.target.value; 
    console.log(this.radio2)
  }
...

//then create an if statement
if (this.radio1 == "yes" && this.radio2 =="yes"){
   //your success toast
}
else {
   //your fail test
}

標籤：

上一篇：離子選擇：預選值在單擊一次之前是不可見的

下一篇：Viewchild在特定方法中未定義