Angular ng-select 在创建动态控件时未选择值

Question

我需要使用 ng-select 动态添加城市，因为我在输入城市名称时需要搜索选项。假设我在新表单中保存了两个城市名称，在进行编辑时，我必须在两个不同的 ng-select 中加载这两个城市 例如： ng-select 应该在页面加载时选择第一个控件（ng-select）纽约和第二控制（悉尼）。

 <div *ngFor="let capitalCity of capitalCities; let i = index;>
        <ng-select [(ngModel)]="selectedCity" [id]="'city-id' + i" name="city" [clearable]="false">
                <ng-option value="">Select</ng-option>
                <ng-option *ngFor="let city of cities" [selected]="city === capitalCity.name" [value]="city">
                  {{ city.name }}
                </ng-option>
              </ng-select> </div>

在这里，我尝试通过比较 city === CapitalCity.name" 来选择城市，但它会抛出一个错误，指出 ng-option 不支持 [selected] 选项。有解决此问题的想法吗？

Answer 1

看起来您正在尝试根据

ng-select

值预先选择

capitalCity

元素的默认值。但是，

[selected]

元素不支持

ng-option

属性。相反，您可以使用

[compareWith]

提供的

ng-select

属性来实现此目的。

以下是修改代码以实现所需行为的方法：

<div *ngFor="let capitalCity of capitalCities; let i = index;">
  <ng-select [(ngModel)]="capitalCity.name" [id]="'city-id' + i" name="city" [clearable]="false" [compareWith]="compareCities">
    <ng-option value="">Select</ng-option>
    <ng-option *ngFor="let city of cities" [value]="city.name">
      {{ city.name }}
    </ng-option>
  </ng-select>
</div>

在组件类中，定义

compareCities

函数来自定义如何执行所选值和选项值之间的比较：

compareCities(city1: any, city2: any): boolean {
  return city1 && city2 ? city1 === city2 : city1 === city2;

在此示例中，

compareCities

函数将所选城市名称 (

capitalCity.name

) 与选项值 (

city.name

) 进行比较。如果比较返回

true

，则相应选项将被预选。

请记住，在上面的示例中，

capitalCity.name

应与城市数组中的城市名称之一完全匹配。如果首都城市名称与列表中的任何城市名称都不匹配，则会显示

Select

选项。

此外，请确保在组件类中定义了必要的属性和结构（

capitalCities

、

cities

等），以便此代码正常工作。