Angular: 单选按钮 [选中] 未使用模板引用变量设置

Question

如标题所示，我有一个场景，如果选中 "Select All" 单选按钮，它必须选中下面各列中的所有单选按钮。不幸的是，这不起作用。

这是一个示例：

<table>
  <thead>
    <th>Role</th>
    <th colspan="3">Access</th>
  </thead>
  <tbody>
    <tr>
      <td>Select All</td>
      <td>
        <input #none type="radio" name="access0" value="allNone"/>
        <label>None</label>
      </td>
      <td>
        <input #readOnly type="radio" name="access0" value="allReadOnly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input #full type="radio" name="access0" value="AllFull"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Admin</td>
      <td>
        <input type="radio" name="access1" value="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access1" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access1" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Sales Person</td>
      <td>
        <input type="radio" name="access2" value="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access2" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access2" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
  </tbody>
</table>

here 是 StackBlitz 示例的 link。

我不确定为什么，例如，在设置 [checked] 时，所有 'None' 单选按钮都没有被选中，如下所示：

<input type="radio" name="access1" value="None" [checked]="none.checked"/>

Answer 1

您必须像这样使用 ngModel 来更新单选按钮值 -

app.component.html

<table>
  <thead>
    <th>Role</th>
    <th colspan="3">Access</th>
  </thead>
  <tbody>
    <tr>
      <td>Select All</td>
      <td>
        <input type="radio" name="access0" value="allNone" 
        [(ngModel)]='none'/>
        <label>None</label>
      </td>
      <td>
        <input [(ngModel)]='readonly' type="radio" name="access0" value="allReadOnly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input [(ngModel)]='full' type="radio" name="access0" value="AllFull"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Admin</td>
      <td>
        <input type="radio" name="access1" [value]="1" [checked]='none'/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access1" value="ReadOnly" [checked]='readonly'/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access1" value="Access" [checked]="full"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Sales Person</td>
      <td>
        <input type="radio" name="access2" value="None" [checked]="none"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access2" value="ReadOnly" [checked]="readonly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access2" value="Access" [checked]="full"/>
        <label>Full</label>
      </td>
    </tr>
  </tbody>
</table>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  public none=false;
  public readonly=false;
  public full=false;
}

Answer 2

检查更改：

<table (click)="cd.detectChanges()">
    <thead>
        <th>Role</th>
        <th colspan="3">Access</th>
    </thead>
    <tbody>
        <tr>
            <td>Select All</td>
            <td>
                <input #none type="radio" name="access0" value="allNone"/>
        <label>None</label>
      </td>
      <td>
        <input #readOnly type="radio" name="access0" value="allReadOnly"/>
        <label>Read Only</label>
      </td>
      <td>
        <input #full type="radio" name="access0" value="AllFull"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Admin</td>
      <td>
        <input type="radio" name="access1" [value]="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access1" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access1" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
    <tr>
      <td>Sales Person</td>
      <td>
        <input type="radio" name="access2" value="None" [checked]="none.checked"/>
        <label>None</label>
      </td>
      <td>
        <input type="radio" name="access2" value="ReadOnly" [checked]="readOnly.checked"/>
        <label>Read Only</label>
      </td>
      <td>
        <input type="radio" name="access2" value="Access" [checked]="full.checked"/>
        <label>Full</label>
      </td>
    </tr>
  </tbody>
</table>

和 TS:

import {ChangeDetectorRef, Component} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(protected cd: ChangeDetectorRef){}
}

Answer 3

disclamer 这不是答案，而是对关于将 [(ngModel)] 用于 ReactiveForm 的评论的答案。

@monstertjie_za，文档表明您不要在同一个输入中使用 TOGETHER formControlName 和 [(ngModel)]，并不是说您不能将输入用于反应形式。想象一下你的例子。你有一个像

这样的反应形式

form=new FormGroup({
    accessAdmin:new FormControl(),
    accessPersonal:new FormControl()
})

但是你想让用户快速选择

<form [formGroup]="form">
    <!--a input that not belong to the ReactiveForm that use [(ngModel)]-->
    <div>
        <label><input type="radio" value="None" [ngModelOptions]="{standalone:true}"
           [ngModel]="access" (ngModelChange)="change($event)"/>None</label>
    <label><input type="radio" value="ReadOnly" [ngModelOptions]="{standalone:true}"
           [ngModel]="access" (ngModelChange)="change($event)"/>ReadOnly</label>
    <label><input type="radio" value="Access" [ngModelOptions]="{standalone:true}"
           [ngModel]="access" (ngModelChange)="change($event)"/>Access</label>
  </div>
        <!--inputs that belong to our formGroup-->
  <div>
    <label><input type="radio" value="None" formControlName="accessAdmin"/>None</label>
    <label><input type="radio" value="ReadOnly" formControlName="accessAdmin"/>ReadOnly</label>
    <label><input type="radio" value="Access" formControlName="accessAdmin"/>Access</label>
  </div>
  <div>
    <label><input type="radio" value="None" formControlName="accessPersonal"/>None</label>
    <label><input type="radio" value="ReadOnly" formControlName="accessPersonal"/>ReadOnly</label>
    <label><input type="radio" value="Access" formControlName="accessPersonal"/>Access</label>
  </div>
</form>
<pre>
  {{form?.value|json}}
</pre>

你有像

这样的功能

change(value) {
    this.form.get('accessAdmin').setValue(value);
    this.form.get('accessPersonal').setValue(value);
  }

您可以看到 stackblitz demo

您看到我们使用带有 [(ngModel)] 的输入来帮助用户更改 form.accessAdmin 和 form.accessPersonal 的值。它与你给我看的 link 无关，而且结构完美 - 即使我会说它对用户有帮助 -

Angular: 单选按钮 [选中] 未使用模板引用变量设置

Angular: radio button [checked] not set with template reference variable

html

radio-button

angular

angular-template-variable