Question

我是Angular2的新手，我有一个广播组，我正在尝试使用[（ngModel）]将它绑定到实体person.testBoolean，以便我可以将其保存在数据库中。我想设置一个默认值为选中，我看到几个例子，发现他们将默认值设置为[（ngModel）]，但在我的情况下，我想将它绑定到我的实体，因此我不能使用[（ngModel）] 。任何人都可以建议其他选择。 checked = idx不起作用。

<div class="form-group">
    <label for="radioboolean">Boolean: </label>
    <div *ngFor="let entry of entries; let idx = index" class="radio-inline" >
       <input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="idx === 1" [value]="entry.id" />{{ entry.description }}
    </div>
</div>

Ts代码：

 entries = [
              {id: 1, description: 'True' },
              {id: 2,description: 'False'},
              {id: 3,description: 'Undefined'}
           ];

人是我的实体：

export interface IPerson {

    id: string;
    name: string;
    testNumber: number | null;
    testDatetime: Date | null;
    testBoolean: boolean | null;
    // Refs to parent entities
    team: ITeam;
    teamId: string;

};

Answer 1

您可以使用以下条目的ID：[checked]="entry.id === 1"

<div *ngFor="let entry of entries; let idx = index" class="radio-inline" >
                <input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="entry.id === 1" [value]="entry.id" />{{ entry.description }}
            </div>

Answer 2

如果您总是希望选择第一项，则可以使用。

在你的循环中 - * ngFor =“让条目输入;让第一个=第一个;

并在单选按钮组中[[checked] =“first”

例如：

<div *ngFor="let entry of entries; let first = first; let idx = index" class="radio-inline" >
<input type="radio" [(ngModel)]="person.testBoolean" name="radiogroup" [checked]="first" [value]="entry.id" />{{ entry.description }}
</div>

Answer 3

一个例子：在模板文件中：

 <form [formGroup]="formGender">
        <input type="radio" value="1" [(ngModel)]="userBasicInformation.gender">
        <span class="font-size-12px font-bold">MALE</span>
        <input type="radio" value="0" [(ngModel)]="userBasicInformation.gender">
        <span class="font-size-12px font-bold">FEMALE</span>
 </form>

在Component.ts文件中：

ngOnInit() {
    this.userBasicInformation.gender = '0';
}

结果是，单选按钮将选择默认值为性别值= 0（女性），如下图所示：

Answer 4

export class ConfirmationmodalComponent implements OnInit {
  cancel_associated_session: any = false;

  constructor(
  ) {}

  ngOnInit(): void {
  }
}

<div class="form-check form-check-inline">
  <input
    class="form-check-input"
    type="radio"
    id="inlineRadio1"
    name="cancel_associated_session"
    [(ngModel)]="cancel_associated_session"
    [value]="true"
  />
  <label class="form-check-label" for="inlineRadio1">
    Yes
  </label>
</div>
<div class="form-check form-check-inline">
  <input
    class="form-check-input"
    type="radio"
    id="inlineRadio2"
    name="cancel_associated_session"
    [(ngModel)]="cancel_associated_session"
    [value]="false"
  />
  <label class="form-check-label" for="inlineRadio2">
    No
  </label>
</div>

Angular2如何使用默认值设置单选按钮

4 个答案: