获取选择单选 Angular 6 的默认值

Question

我有这个映射用户 *------------------------1 职业。 我想修改一个用户。 所以我从

list-users.component.html

中选择一个，我将被重定向到

modify-user.component.html

。

以下是所需文件：

修改用户.component.html

<form [formGroup]="editForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" formControlName="name" placeholder="Name" name="name" class="form-control" id="name">
        </div>
        <div *ngFor='let pro of professions; let i = index'>
            <label>
                <input type="radio"
                       id="pro.id" 
                       checked="pro.selected" 
                       name="pro"
                       [(ngModel)]="this.editForm.pro"
                       (change)='radioChecked(pro.id, i)'
                       [value]="pro.libelle">
                <span></span>
                <span class="check"></span>
                <span class="box"></span>
                {{pro.libelle}}
            </label>
        </div>
        <p>==> {{selectedProfessionRadio}}</p>
        <button class="btn btn-success">Update</button>
    </form>

修改用户.component.ts

export class ModifyUserComponent implements OnInit
{

    private selectedProfessionRadio;
    professionLib: string;
    editForm: FormGroup;
    usrId: String;

    professions: Profession[] =
    [
        {id: 1, libelle: "Engineer", selected: false},
        {id: 2, libelle: "Student", selected: false},
    ];

    radioChecked(id, i, pro)
    {
        this.professions.forEach(pro=>
        {
            if(pro.id !== id)
            {
                pro.selected = false;
            }
            else
            {
                pro.selected = true;
            }
        })

        this.userService.getProfessionById(id).subscribe(data =>
        {
            console.log(data);
            pro = data as Profession;

            localStorage.removeItem("ProfessionLibelle");
            localStorage.setItem("ProfessionLibelle", pro.libelle);

        },error => console.log(error));

        this.selectedProfessionRadio = localStorage.getItem("ProfessionLibelle");
    }

  constructor(private formBuilder: FormBuilder, private router: Router, private userService: UserService) {}

  ngOnInit()
  {
      let userId = localStorage.getItem("editUserId");
      this.usrId = localStorage.getItem("editUserId");

      this.userService.getProfessionLibelleByIdUser(+userId).subscribe(data =>
      {
          console.log(data);
          let pro = data as string;
          this.professionLib = pro;

          localStorage.removeItem("ProfessionLibe");
          localStorage.setItem("ProfessionLibe", this.professionLib);

      },error => console.log(error));

      this.selectedProfessionRadio = localStorage.getItem("ProfessionLibe");

      this.editForm = this.formBuilder.group
      ({
          id: [],
          name: ['', Validators.required],
          pro: [this.selectedProfessionRadio, Validators.required]
      });

      this.userService.getUserId(+userId).subscribe( data =>
      {
          this.editForm.patchValue(data);
      });
  }

}

我的问题是，重定向到修改用户后，我通常得到第一个职业（这是错误的），与所描述的完全一样。

你能告诉我我错过了什么吗？ 非常感谢。

Answer 1

您分享的代码片段缺少一些信息并且包含一些错误。我能够在 stackblitz 上重新创建它，希望它能捕捉到您想要实现的目标。