将端点的值分配给复选框

Question

我正在尝试将从端点获得的值分配给复选框这是对象{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">我添加了注释来说明我在上面的代码中所做的事情所以现在我很困惑为什么电子邮件复选框没有被选中。有任何想法吗？

Answer 1

这些不是复选框而是单选按钮。假设您确实需要单选按钮（在您的情况下它看起来像这样，因为它是其中之一），则需要完成一些事情。

您可以使用 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

演示