亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將端點的值分配給復選框

將端點的值分配給復選框

慕姐4208626 2023-09-21 16:28:57
我正在嘗試將從端點獲得的值分配給復選框這是對象{sendOtpEmail: true}我必須在端點響應內進行一些搜索,以區分電子郵件值返回還是手機值返回這是我的代碼TS  otpCellValue: any;  otpEmailValue: any;  getOTPChannel() {    this._loader.start();    this._subscriptions.push(this._corpService.getOTPChannel().subscribe((resp) => {      //get endpoint object      console.log(resp);      //get endpoint object parameter name      let keyNames = Object.keys(resp);      console.log(keyNames[0]);      //check for email keyword      if(keyNames[0].includes('Email')) {        console.log(resp.sendOtpEmail);        //get value        if(resp.sendOtpEmail == true) {          //email value is true so the otpEmailValue checkbox should be checked however it is not          this.otpEmailValue = 1;          this.otpCellValue = 0;        } else {          this.otpEmailValue = 0;          this.otpCellValue = 0;        }      }      this._loader.stop();    }, (error) => {      this._loader.stop();      this._errorService.openErrorPopup('Failed to get OPT channel.');    }));  }超文本標記語言  <input type="radio" name="1" id="1" class="with-gap" [(ngModel)]="otpCellValue" [(value)]="otpCellValue">  <input type="radio" name="2" id="2" class="with-gap" [(ngModel)]="otpEmailValue" [(value)]="otpEmailValue">我添加了注釋來說明我在上面的代碼中所做的事情所以現在我很困惑為什么電子郵件復選框沒有被選中。有任何想法嗎?
查看完整描述

1 回答

?
慕桂英3389331

TA貢獻2036條經驗 獲得超8個贊

這些不是復選框而是單選按鈕。假設您確實需要單選按鈕(在您的情況下它看起來像這樣,因為它是其中之一),則需要完成一些事情。


您可以使用 1 個屬性來實現此目的,而不是使用 2 個屬性來指示選擇了哪個選項。


所以


this.otpEmailValue = 1;

this.otpCellValue = 0;

成為


this.contact = 'email'; // This line is now equivalent to the ones above

在模板中,單選按鈕輸入需要具有相同的名稱才能充當 1 個輸入而不是 2 個輸入,因為畢竟我們只想選擇 1 個選項。該ngModel指令現在指向我們想要綁定的值,在我們的例子中是contact。最后,該值應該是靜態的。當綁定的屬性值ngModel與單選按鈕之一的值匹配時,它將選擇它。


因此,在所有這些更改之后,我們得到以下結果。


<input type="radio"

       name="contact-option"

       id="1"

       class="with-gap"

       [(ngModel)]="contact"

       value="cell"> Cell

<input type="radio"

       name="contact-option"

       id="2"

       class="with-gap"

       [(ngModel)]="contact"

       value="email"> Email

演示


查看完整回答
反對 回復 2023-09-21
  • 1 回答
  • 0 關注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號