Question

本周，我遇到了一个问题，即角度材料的下拉控件没有填充来自API的默认值。我的数据源看起来像这样：

public selectDataSource = [{
                    id: 1,
                    name: 'Option 1'
                }, {
                    id: 2,
                    name: 'Option 2'
                }, {
                    id: 3,
                    name: 'Option 3'
                }];

价值来自API：

{
'selectedOption': {
                    id: 2,
                    name: 'Option 2'
                }
}

但不知何故，当我将值分配给反应式表单控制字段时，它并没有自动填充，理想情况下应该是预期的行为。

原因，请在下面回答......继续

Answer 1

我也遇到了同样的问题，下拉列表没有显示已经保存/选择的选项，这个对另一个问题的answer终于有所帮助。

解决方案是使用select标记上的[compareWith]="compareFunction"属性来覆盖默认的比较。通过引用自定义比较功能，您可以调整初始值与下拉值的匹配方式。

我当前的解决方案：

<mat-form-field>
   <mat-select formControlName="gender" [compareWith]="compareSelectValues">
      <mat-option *ngFor="let gender of genderValues" value="{{gender.id}}">{{gender.label}}</mat-option>
   </mat-select>
</mat-form-field>

和打字稿功能：

private compareSelectValues(selectedValue, compareValue): boolean {
   return Number(selectedValue) === compareValue;
}

需要

Number()，因为将值设置为HTML后，该值将转换为字符串。在这里使用材料设计组件，但请看另一篇文章，这不应更改常规功能。希望这对像我一样先找到这个问题的人有所帮助。

Answer 2

在完成所有研究之后，我得出的结论是，如果Angular指向与原始dataSource数组中相同的内存位置，则只会选择默认值。

在上面的示例中，selectDataSource存储在不同的内存位置，而来自API的值指向不同的内存位置。

解决方案：循环遍历原始数据源，并使用API的结果过滤匹配的条目，以从原始dataSource获取所选对象，以及您完成的操作。如下所示：

selectedOption = selectedDataSource.filter((option) => option.id === selectedOption.id)[0];

现在，我们将selectedOption指向与原始dataSource数组相同的内存位置。

以下是解决方案的链接。尝试使用变量solveProblem来查看默认行为（指向不同的内存位置时）。

https://stackblitz.com/edit/angular-reactive-dropdown-control

在希望中，它有一天会帮助某人。

谢谢， Manish Kumar

角度反应形式 - 如何设置选择/下拉控制的默认值？

2 个答案: