在 Angular 9 中重置单选按钮状态答案

【问题标题】：Reset radio-button state in Angular 9在 Angular 9 中重置单选按钮状态
【发布时间】：2020-10-26 16:14:06
【问题描述】：

我正在使用 Angular 9 和 mat-radio-button。我用来自服务器的数据填写用户护照。我想在接收数据时立即选择正确的单选按钮，所以我设置了双向绑定。单选按钮是可选择的。但是，如果我打开另一个用户护照，则在新护照中选择单选按钮，在旧护照中它完全消失 - 没有选择单个单选按钮。所有其他用户数据都保留在表单上。此外，模型中保存了所有信息，当您选择单选按钮时，信息会发生变化。请告诉我，可能是什么问题？

user.component.html

<mat-radio-group aria-label="Пол" [(ngModel)]="user.gender.id" name="gender">
    <mat-radio-button [value]=1>Муж.</mat-radio-button>
    <mat-radio-button [value]=2>Жен.</mat-radio-button>
</mat-radio-group>

user.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../service/user.service';
import { User } from '../../models/user/user';
import { Data } from '../../../home/home.component';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  public user: User;

  constructor(data: Data, private userService: UserService) {
    if (data != undefined) {
      this.user = data as unknown as User;
      this.Get(this.user.id);
    }
    else {
      this.user = new User();
    }
  }

  ngOnInit(): void {
  }

  private Get(id: number) {
    this.userService.Get(id).subscribe(
      data => { this.user = (data as any).user as User; }
    );
  }
}

user.ts

import { Gender } from "../doctors/Gender";
export class User {
  public id: number;
  public name: string;
  public surname: string;
  public patronymic: string;
  public gender: Gender;
  public login: string;
  public passwordHash: string;
  public birthday: Date;
  public employmentDateInAlpha: Date;
  constructor() {
    this.id = 0;
    this.name = '';
    this.surname = '';
    this.patronymic = '';
    this.gender = new Gender();
    this.login = '';
    this.passwordHash = '';
    this.birthday = new Date();
    this.employmentDateInAlpha = new Date();
  }
}

gender.ts

export class Gender {
  public id: number;
  public name: string;

  constructor() {
    this.id = 3;
    this.name = 'Не задан';
  }
}

This is what the user passport object looks like

【问题讨论】：

标签： angular radio-button material-design reset radio-group

【解决方案1】：

我自己找到了问题的答案。我的<mat-radio-group> 在里面

<mat-card>
   <form class = "example-form">
      ...
   </form>
</mat-card>

我用<mat-card-content> 替换了<form> 并从<mat-radio-group> 中删除了name = "gender"，然后才进行绑定工作并且单选按钮状态停止重置。我不认为这可能是个问题。

【讨论】：