时间戳

首页 > 解决方案 > 如何在选择选项 Angular 9 处将数据从后端绑定到前端

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

问题描述

我在后端保存了一个数字，然后我试图通过这个数字在 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"

在这里你可以看到employmentTypeis 3 这意味着EmploymentType.Owner被选中。

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

标签： javascripthtmlangulartypescript

解决方案

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

以及您的 html 选项

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

推荐阅读