Question

我在尝试将下拉列表中的选定值设置为从模型对象获取的相等值时遇到了问题。一些解释：

sourceSchemesList 的类型为Scheme []

元素包含名为scheme类型为Scheme的属性

Scheme如下所示：

{
  name: string
  packetName: string
  packetVersion:
    {
      minor: number
      major: number
    }
}

打开页面时，首先我初始化选择选项＆＃39; list，之后，我为currentSource.operations设置了有效数据的值。打开视图时，下拉列表会显示正确的选项，但没有选定的值。

<div class="row" *ngFor='let element of currentSource.operations'>
    <div class="col-md-10">
        <select class="form-control col-sm-12" [(ngModel)]="element.scheme">
            <option *ngFor="let row of sourceSchemesList" [ngValue]="row" [label]="row.packetName + ' : ' + row.name"></option>
        </select>
    </div>
    <div class="col-md-2">
        <button type="button" class="btn mini-button border-0 p-1" (click)="deleteSourceOperation(element)">
            <i class="fa fa-minus" aria-hidden="true"></i>
        </button>
    </div>

我尝试使用[selected]属性并将条件设置为

  "element.scheme.name===row.name && element.scheme.packetName===row.packetName && <comparing versions by every property>"

但它没有帮助。还有什么可以干涉？可能存在问题，因为我的ngModel是一个数组＆＃39;对象

编辑：对象是不同的，因此它们不等于引用。这就是我想使用[selected]的原因。

Answer 1

ngModel和option元素需要是相同的引用。看看这个stackblitz：

https://stackblitz.com/edit/angular-dphu6f

直接引用的选择工作另一个不工作。 Angular不会比较对象的每个属性来定义它是否相同，它会检查对象的引用。

您可以在select标记上提供compareWith函数以覆盖Angular的默认比较。

Angular Initialize选择模型对象

1 个答案: