如何使用 HTTPClient 使用从 JSON 文件检索到的 ID 值填充 Select 控件

Question

在我的 Angular 应用程序中，我使用 HTTP 客户端从 JSON 文件检索的值填充下面的 select 控件。

<label for="manager">Manager:</label>
    <select class="form-control" id="manager">
        <option value="" disabled>Choose manager</option>
        <option *ngFor="let manager of managers" [value]="manager.id">{{manager.fullName}}</option>
    </select>

这里是 JSON:

"managers": [
    {
        "id": 1,
        "fullName": "Phil",
        "contactPreference": "email",
        "email": "phil@gmail.com",
        "phone": "0865963625"
    }
]

这里是我创建表单的地方：

this.jobForm = this.fb.group({
      title: ['', Validators.required],
      description: ['', Validators.required],
      managerId: [''],
    });

这是我拥有的一个job对象：

job: IJob = {
    id: null,
    title: '',
    description: '',
    employeeId: null,
    managerId: null
  };

我想用 select 选项

中的 manager.Id 填充此 job 对象的 managerId

这是我的尝试，但没有用：

this.job.managerId = this.jobForm.value.manager;

有人可以告诉我如何从 select 控件访问 ID 并将其添加到我的 job 对象吗？

我也打印了 console.log('MANAGER VALUE: ' + this.jobForm.value.manager); 但这是打印的内容：

MANAGER VALUE: undefined

Answer 1

好的，所以我想出了我需要改变的地方。

我在 select 控件中添加了 fomControlName。

HTML:

<select class="form-control" id="managerId" formControlName="managerId">
    <option value="" disabled>Choose manager</option>
    <option *ngFor="let manager of managers" [value]="manager.id">{{manager.fullName}}</option>
</select>

上面的 formControlName 需要匹配下面的 FormBuilder 中的 managerId。

打字稿：

this.jobForm = this.fb.group({
      title: ['', Validators.required],
      description: ['', Validators.required],
      managerId: [''],
    });


this.job.managerId = this.jobForm.value.managerId;

如何使用 HTTPClient 使用从 JSON 文件检索到的 ID 值填充 Select 控件

How to populate Select control with ID value retrieved from JSON file using HTTPClient

json

angular

angular-httpclient