将端点的值分配给复选框

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"&nbsp; &nbsp; &nbsp; &nbsp;name="contact-option"&nbsp; &nbsp; &nbsp; &nbsp;id="1"&nbsp; &nbsp; &nbsp; &nbsp;class="with-gap"&nbsp; &nbsp; &nbsp; &nbsp;[(ngModel)]="contact"&nbsp; &nbsp; &nbsp; &nbsp;value="cell"> Cell<input type="radio"&nbsp; &nbsp; &nbsp; &nbsp;name="contact-option"&nbsp; &nbsp; &nbsp; &nbsp;id="2"&nbsp; &nbsp; &nbsp; &nbsp;class="with-gap"&nbsp; &nbsp; &nbsp; &nbsp;[(ngModel)]="contact"&nbsp; &nbsp; &nbsp; &nbsp;value="email"> Email演示