Question

工作案例 在这种情况下，设置单选按钮检查工作正常

不工作案例 但是当我把ngModel放进去的时候就没用了。

<input type="radio" name="radio5" id="radio4" class="css-checkbox" value="all" (click)="setSpecial(false)" [checked]="!isSpecial"  ngModel name="radioModel"/>

Answer 1

您应该assigned到ngModel

如果selectedValue值为all，则radio button将为checked。

<强>组件：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  selected = "all";

 }

<强> HTML

<input type="radio" name="radio5" id="radio4" class="css-checkbox" value="all" [checked]="!isSpecial"[(ngModel)]="selected" name="radioModel"/> Radio1

<input type="radio" name="radio5" id="radio4" class="css-checkbox" value="notall" [checked]="!isSpecial"[(ngModel)]="selected" name="radioModel"/> Radio2

Here is a Working DEMO

Answer 2

例如：你确实喜欢这个html

async

在ts文件构造函数中

<div class="row">
        <div class="col-md-4">
            <input type="radio" name="gender" value="male" checked [(ngModel)]="genderval"> Male<br>
        </div>
        <div class="col-md-4">
            <input type="radio" name="gender" value="female" [(ngModel)]="genderval"> Female<br>
        </div>
        <div class="col-md-4">
            <input type="radio" name="gender" value="other" [(ngModel)]="genderval"> Other
        </div>
    </div>

在为表单设置ngModel时，默认情况下未选中Angular 5单选按钮

2 个答案: