Question

我正在尝试默认选中零值的单选按钮。我正在尝试使用[checked]='true'属性。但这不起作用。

<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="0" [(ngModel)]="unitTrustsPnl"  [checked]='true'>
<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="1" [(ngModel)]="unitTrustsPnl">

样本

https://stackblitz.com/edit/angular-jj9gib

Answer 1

由于按钮绑定到变量，请尝试改为设置变量：

@objc func refreshData() {
    print("refresh initiated")
    refreshControl.endRefreshing()
}

Answer 2

你们每个单选按钮都有一个属性calld值，这意味着如果你将ngModel的值（unitTrustsPnl）设置为每个无线电的值，那么将检查该无线电。

例如，你有

<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="0" [(ngModel)]="unitTrustsPnl">

因此，如果您将 unitTrustsPnl 值设置为0，则此广播将会检查，依此类推。

更新：你的变量（unitTrustsPnl）应该是数字类型，声明它就像

public unitTrustsPnl：number;

它的原因是因为你提到[value] =＆＃34; 0＆＃34; HTML认为您有一个数字类型变量。

Answer 3

除了您已经拥有的[已检查]外，请尝试添加此内容：

[attr.checked]="true"

Answer 4

执行[(ngModel)]=“variableWithZeroValue” [checked]=“variableWithZeroValue==0? true: false”之类的操作并在类的构造函数中初始化variableWithZeroValue=0。

但是，只要variableWithZeroValue的值等于零，总会检查复选框。

希望，这有帮助。

Answer 5

parent.component.ts

import {Component} from '@angular/core';
import {Form, NgForm} from '@angular/forms';

interface Gender {
  id: number;
  name: string;
  title: string;
  value: string;
}

const gendersList = [
  {id: 1, name: 'gender', value: 'male', title: 'Male'},
  {id: 2, name: 'gender', value: 'female', title: 'Female'}
];

@Component({
  selector: 'app-switch-case',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  radioList: Gender[] = gendersList;

  constructor() { }

  onSubmit(form: NgForm): void {
    console.log('onSubmit form',form)
  }

}

parent.component.html


<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
    <div>
        <label for="gender">
            <app-radio *ngFor="let radio of radioList"
                [title]="radio.title"
                [groupName]="radio.name"
                [value]="radio.value"
              [defaultValue]="'female'"
            ></app-radio>
        </label>
    </div>
    <button [disabled]="!itemForm.valid" type="submit">Submit</button>

</form>

radio.component.ts

import {Componen, Input} from '@angular/core';
import {ControlContainer, NgForm} from '@angular/forms';

@Component({
  selector: 'app-radio',
  templateUrl: './radio.component.html',
  styleUrls: ['./radio.component.css'],
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class RadioComponent {
 @Input() title: string;
 @Input() groupName: string;
 @Input() value: string;
 @Input() defaultValue: string;
 @Input() isRequired: boolean;
  constructor() { }

}

radio.component.html

<div>
    <input
        type="radio"
        [value]="value"
        [name]="groupName"
        [ngModel]="defaultValue"
        [required]="isRequired"
    >
    <span>{{title}}</span>
</div>

默认情况下，Angular 2检查单选按钮

5 个答案: