如何在Angular的表单输入值中绑定用户详细信息？

Question

我正在尝试将用户数据绑定到输入值中。关键是表格中已经使用ng-for来获取选择的数据。但是，我不知道如何在输入值上绑定数据。我认为应该有其他形式的ng，但是它不起作用。该页面是用户设置组件，用户可以在其中查看输入中的详细信息并可以对其进行更新。

TypeScript

import { Component, OnInit} from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators,ControlValueAccessor,ValidatorFn,ValidationErrors} from '@angular/forms';
import { Router } from '@angular/router';
import {country, Countries} from "../../models/countries.model";



@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.css']
})
export class SettingsComponent implements OnInit {
  users: any[] = [ 
    {
      username: 'Jess',
      name: 'Jessica',
      lastname: 'Scott',
      gender: 'Female',
    }, 
  ];
  SettingsForm: FormGroup;
  forbiddenEmails: any;
  errorMessage: string;

  countries:Countries[]=country;

  genders = [
    "Male",
    "Female",
    "Other"
  ];



  constructor (
    public nav: HeaderService,
    private authService: AuthService,
    private router: Router,
    private tokenService: TokenService) {
      this.SettingsForm = new FormGroup({
        'username': new FormControl(null, [Validators.required,
       Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])'),
        ]),
        'name': new FormControl(null, [Validators.required,
       Validators.pattern('(?=.*[a-z])(?=.*[A-Z])'),
        ]),
       ...
       ...
       'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
        'country': new FormControl(this.countries[0], [Validators.required, ]),
        'gender': new FormControl(this.genders[0], [Validators.required, ]),

      });
    }


  ngOnInit() {
  }

onSubmit() {
   this.SettingsForm.reset();
}

}

HTML

<form action="" [formGroup]="SettingsForm" *ngFor="let user of users" (ngSubmit)="settingsUser()">
<div class="form-group form-settings">
<input _ngcontent-c0="" class="form-control form-control-lg"  placeholder="username" type="text" id="username" formControlName="username"/>
<span *ngIf="!SettingsForm.get('username').valid && SettingsForm.get('username').touched" class="help-block">Please enter a valid username!</span>
</div>
<div class="form-group form-settings">
  <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email" type="text" id="email" formControlName="email"/>
  <span *ngIf="!SettingsForm.get('email').valid && SettingsForm.get('email').touched" class="help-block">Please enter a valid email!</span>
</div>
<div class="row">
<div class="form-group form-settings col-md-12">
<select class="form-control form-control-lg">
    <option value="">--Please choose an option--</option>
    <option ngDefaultControl [ngValue]="country" *ngFor="let country of countries" formControlName="country">{{country.name}}</option>
</select>
    <span *ngIf="!SettingsForm.get('country').valid && SettingsForm.get('country').touched" class="help-block">Please enter a country!</span>
</div>
</div>
<div class="row">
<div class="form-group form-settings col-md-12">
<select class="form-control form-control-lg">
    <option value="">--Gender--</option>
    <option ngDefaultControl [ngValue]="gender" *ngFor="let gender of genders" formControlName="gender">{{gender}}</option>
</select>
    <span *ngIf="!SettingsForm.get('gender').valid && SettingsForm.get('gender').touched" class="help-block">Please choos a gender!</span>
</div>
<div class="form-group form-settings">
  <div>

      <button type="submit" class="  btn form-btn btn-lg btn-block submit-btn">Sign In With Email</button>

  </div>
</div>
</form>

如何在每个输入上显示数组中的用户详细信息或选择一个值？