当从 Angular 中的 API 获取选项时，在选择的对象中设置选项答案

【问题标题】：Set the option in a select of objects when the options are fetched from an API in Angular当从 Angular 中的 API 获取选项时，在选择的对象中设置选项
【发布时间】：2020-03-24 09:19:07
【问题描述】：

我正在使用 Angular 8 做一个 Web 应用程序。我使用 Reactive Forms，并且我有一个选择来填充获取 API。我从 API 获得的选项是一组对象，如下所示：

[
   {id: 1, name: 'Number one', requireDocumentNumber: true},
   {id: 2, name: 'Number two', requireDocumentNumber: true},
   {id: 3, name: 'Number three', requireDocumentNumber: false},
]

我在 select 中使用 ngValue 将整个对象存储在 formControl 中。

<form [formGroup]="form">
         <div class="form-group">
            <label for="reasonSelect">Select an option</label>
               <select class="form-control"
                    formControlName="reason"
                    id="reasonSelect">
                  <option *ngFor="let r of reasonList" [ngValue]="r">
                     {{r.name}}
                  </option>
                 </select>
           </div>
       </form>

我正在使用setValue 将所需的对象设置到formControl 中，但是表单中没有选择该选项。

reasonList: IReason[] = [];
  form: FormGroup;
  objectToAssign = {
    id: 2, 
    name: 'Number two', 
    requireDocumentNumber: true
    };

  constructor(
    private fb: FormBuilder,
  ) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      reason: [null, Validators.required],
    });

    // async reasons
    of(this.getReasons())
    .delay(2000)
    .subscribe(r => {
      this.reasonList = r;
      // setValue
      this.form.get('reason').setValue(this.objectToAssign);
    });
  }

  getReasons() {
    return [
      {id: 1, name: 'Number one', requireDocumentNumber: true},
      {id: 2, name: 'Number two', requireDocumentNumber: true},
      {id: 3, name: 'Number three', requireDocumentNumber: false},
    ];
  }

该对象在 formControl 内部，但是，它没有在表单中被选中。

我创建了一个演示：https://stackblitz.com/edit/angular-qzxixn

我的目标是在表单中设置所需的选项以显示名称，同时将整个对象保留在 formControl 中。

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

您必须将this.form.get('reason').setValue(this.objectToAssign); 更改为this.form.get('reason').setValue(this.reasonList[1]);，从您的API 获取选项后，它将在选择中被选中。

【讨论】：

我不明白。为什么？这意味着我需要在获取的列表中找到所需选项的索引以将其分配给 formControl？如果我分配与示例中所示相同的对象，我看不到这里的逻辑。有什么区别？
由于某种原因，它在我提供的演示中工作，但它在我的应用程序中无法通过真正的 http 请求工作。选择仍然是空的。我希望你能多帮我一把。
对不起。如果这不起作用，请尝试在您的选择中使用和 ngModel。当您从 API 获取信息时，您可以分配 ngModel this.selectedReason = this.reasonList[1]; 的值。这里有一个演示 link。
您好，感谢您的帮助。出于某种原因，该解决方案仅适用于演示，不适用于来自 API 的真实数据。一个有效的解决方案是在select 标记内使用指令compareWith 通过id 在内部进行比较。
很久以前...也许您仍然阅读我的评论，并且可以使用有效的“compareWith”方法提供更新的 StackBlitz。我尝试使用相同的（“compareWith”）方法但失败了。