时间戳

首页 > 解决方案 > 如何使用 HTTPClient 从 JSON 文件中检索的 ID 值填充 Select 控件

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

问题描述

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

<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
  };

我想从选择选项中填充managerId这个job对象manager.Id

这是我的尝试，但它不起作用：

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

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

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

经理价值：未定义

标签： jsonangularangular-httpclient

解决方案

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

我添加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 需要managerId在下面的 FormBuilder 中匹配。

打字稿：

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


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

推荐阅读