如何在选择选项 angular 9 处将数据从后端绑定到前端

Question

我在后端保存一个数字，然后我尝试通过这个数字在 Angular 的选择选项中显示所选对象。

到目前为止，它只显示了我在 TS 中用枚举声明的列表。 但我的问题是我在后端保存了一个数字，然后在 HTML 中不是我希望的选定值。

这是堆栈闪电战

https://stackblitz.com/edit/angular-ivy-fvvnga?file=src%2Fapp%2Fapp.component.html

HTML是这样的。

<select #selectedValue name="selectedValue"
        id="selectedValue" [ngModel]="selectedValue"
        (ngModelChange)="assignCorporationToManage($event)" class="col-md-12 form-control-sm">
           <option *ngFor="let employment of employmentType"
                   [ngValue]="employment" [selected]="employment">
                {{employment.description | translate}}
           </option>
</select>

TS看起来像这样。

  public employmentType = [
    {name: EmploymentType.EmployedFullTime, description: "employmentType.EmployedFullTime"},
    {name: EmploymentType.EmployedPartTime, description: "employmentType.EmployedPartTime"},
    {name: EmploymentType.Internship, description: "employmentType.Internship"},
    {name: EmploymentType.Owner, description: "employmentType.Owner"},
    {name: EmploymentType.BordMember, description: "employmentType.Boardmember"},
    {name: EmploymentType.Volunteer, description: "employmentType.Volunteer"},
  ];

这是ngModelChange

assignCorporationToManage(selectedValue) {
console.log(selectedValue); //Here it is returning me the number
}

这是枚举。

export enum EmploymentType {
  EmployedFullTime,
  EmployedPartTime,
  Internship,
  Owner,
  BordMember,
  Volunteer,
  SelfEmployed,
  Shareholder,
  Official,
  Recruiter,
  Freelancer,
  Partner
}

但是我确实有从后端读取的数据。

companyUrl: "www.1234.de"
description: "test"
employmentType: 3
endDate: "2020-09-30"
name: "muster"
role: "IT Web Developer"
startDate: "2020-09-30"

正如你所看到的， employmentType是 3，这意味着选择了EmploymentType.Owner 。

但在 HTML 中，我无法显示从就业类型中选择哪个。 如果有人需要更多信息，我可以添加更多代码并更好地解释。

Answer 1

在这里您可以更新您的 html options 。

以及您的 html 选项

<option *ngFor="let employment of employmentType" [ngValue]="employment.name" [selected]="employment">
   {{employment.description | translate}}
</option>

Answer 2

正确答案是这样的。 我通过调试找到的。 它需要是双向数据绑定。

<select #selectedValue name="selectedValue"
        id="selectedValue" [(ngModel)]="data.career.employmentType" //here
         class="col-md-12 form-control-sm">
           <option *ngFor="let employment of employmentType"
                   [ngValue]="employment" [selected]="employment">
                {{employment.description | translate}}
           </option>
</select>