为了账号安全,请及时绑定邮箱和手机立即绑定

将端点的值分配给复选框

将端点的值分配给复选框

慕姐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 关注
  • 47 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信