如何为 angular 中的以下情况启用单选按钮

Question

我在下面使用 table...我想启用基于选中复选框（左侧）的单选按钮（右侧）。当我们取消选中我们想要禁用无线电按钮的复选框时。

         <table class="table">
              <thead>
                <tr>
                  <th>Select</th>
                  <th>
                    Group Name
                  </th>
                  <th>Profile</th>
                </tr>
              </thead>
              <tbody id="tabl">
                <tr *ngFor="let data of col; let i = index">
                  <td>
                    <input class="pull-left" type="checkbox" name="checkbox" value="{{data.id}}"
                      (change)="dataCheck($event,data)" />
                  </td>
                  <td> {{data.name}}</td>
                  <td>
                    <input type="radio" value="profile" name="profile" 
                       (click)="applyProfile(data.id,data.name)">
                  </td>
                </tr>

              </tbody>
            </table>

用于勾选复选框，

  dataCheck(event, data) {
      if (event.target.checked) {
         this.selectedGroups.push(data.id);
          console.log("selectedGroups push", this.selectedGroups);
      } else {
         this.selectedGroups = this.selectedGroups.filter(item => {
         item !== data.id;
      });

     }
   }

有人能帮帮我吗？？

Answer 1

Here 是工作代码的堆栈闪电战。我稍微简化了它并省略了 HTML 中定义的 2 个函数的实现，因为它们不是答案所必需的。

<tbody id="tabl">

    <tr *ngFor="let data of col; let i = index">
      <td>
        <input #checkboxInput class="pull-left" type="checkbox" name="checkbox" value="{{data.id}}"
          (change)="dataCheck($event,data)" />
      </td>
      <td> {{data.name}}</td>
      <td>
        <input type="radio" [disabled] = '!checkboxInput.checked' value="profile" name="profile" 
            (click)="applyProfile(data.id,data.name)">
      </td>
    </tr>

</tbody>

我们的想法是在复选框上使用模板引用，因为这是我们想要查看它是否被选中的元素。 #checkboxInput 将复选框公开为 HTMLInputElement，我们可以将其用作 HTML 其余部分的变量。您可以阅读更多关于 HTMLInputElement here.

上公开的属性的信息

只有复选框和单选按钮具有 checked 属性。因此，在单选按钮上，我们将 [disabled] = !checkboxInput.checked 设置为属性。这是说 "If the checkbox is not checked, then the radio button is disabled. If the checkbox is checked, then the radio button is not disabled"。

希望这对您有所帮助。

如何为 angular 中的以下情况启用单选按钮

How to enable the radio button for below case in angular

typescript

angular6

angular7