如何使用值自动加载/自动填充选择标签

Question

我是ngModels / ngForms的新手，并且遇到了这个问题：

我正在尝试加载“更新用户”页面，并且从用户帐户加载的所有内容（下拉/选择标记值除外）都将加载。如何放置“默认”值或预加载的值？

ps。我也在努力将加载的值识别为输入为加载的实际值，但是仍然出现我所需的错误。

我尝试过[value] =“ 1”并选择并选择=“ selected”并选择了=“ 1”

    <div class="container">

   <div *ngFor='let User of GUser$'>
   <div style="width: 30%; align-content: center;">
  <h2>Update Account Details:</h2>
  <form #form="ngForm" (ngSubmit)="submit()">
    <br>
    <label>FirstName: </label>
    <input name="f" #fName="ngModel" [(ngModel)]="FirstName" 
    (input)="FirstName=$event.target.value" type="text"
      class="form-control" required pattern="^[a-zA-Z ]*$" maxlength="20" 
     value="{{User.UserName}}">
    <div class="validation-error" *ngIf="fName.invalid && 
    fName.touched">This field is required!</div>

    <label>Surname: </label>
    <input name="s" #SName="ngModel" [(ngModel)]="Surname" 
    (input)="Surname=$event.target.value" type="text"
      class="form-control" required pattern="^[a-zA-Z ]*$" maxlength="20" 
     value="{{User.UserSurname}}">
    <div class="validation-error" *ngIf="SName.invalid && 
    SName.touched">This field is required!</div>

    <label>Date of Birth: </label>
    <input name="d" #DOB="ngModel" [(ngModel)]="DateofBirth" 
    (input)="DateofBirth=$event.target.value" type="date"
      class="form-control" required pattern="^[0-9]{4}[/][0-9]{2}[/][0-9] 
    {2}$"
      value="{{User.UserDateOfBirth}}">
    <div class="validation-error" *ngIf="DOB.invalid && DOB.touched">This 
    field requires a valid date format
      (YYYY/MM/DD)</div>

    <label>Email:</label>
    <input name="e" #mail="ngModel" [(ngModel)]="Email" 
    (input)="Email=$event.target.value" type="text"
      class="form-control" required pattern="[^ @]*@[^ @]*" value=" 
    {{User.UserEmail}}">
       <div class="validation-error" *ngIf="mail.invalid && 
     mail.touched">This field requires a valid email address
      (Contain @ symbol)</div>

    <label>Contact Number: </label>
    <input name="n" #Number="ngModel" [(ngModel)]="Contact" 
    (input)="Contact=$event.target.value" type="text"
      class="form-control" required pattern="^[0-9]{10}$" value=" 
    {{User.UserContactDetails}}">
    <div class="validation-error" *ngIf="Number.invalid && 
     Number.touched">This field requires a valid phone number
      (10 Digits)</div>

    <label>Street Address: </label>
    <input name="a" #Street="ngModel" [(ngModel)]="Address" 
    (input)="Address=$event.target.value" type="text"
      class="form-control" required value="{{User.UserAddress}}">
    <div class="validation-error" *ngIf="Street.invalid && 
    Street.touched">This field is required!</div>

    <label>City: </label>
    <select [(ngModel)]="CityList" (input)="City=$event.target.value" 
    class="form-control" required>
      <option *ngFor="let prod of CityList" value={{prod.id}}> 
    {{prod.City}} </option>
    </select>
    <br>

    <label>Gender: </label>
    <select [(ngModel)]="GenderList" (input)="Gender=$event.target.value" 
    class="form-control" required >
      <option *ngFor="let prod of GenderList" value={{prod.id}} > 
    {{prod.Gender}} </option>

    </select>
    <button class="btn btn-success" style="width: 80%; text-align: 
    center" 
     type="Submit"
      [disabled]="!form.valid">Save</button>
    </form>
    </div>
   </div>
    </div>