Angular中使用ng-select显示选中项的bindLabel与bindValue

方法一：绑定整个国家对象到ngModel #

这种方法最直接，让ng-select绑定完整的国家对象，就能直接获取选中项的所有属性：

1. 修改component.ts，新增绑定对象的变量：

export class AppComponent {
  out = new EventEmitter();
  constructor() {}
  countries = [
    { code: 1, name: 'Ukrain' },
    { code: 2, name: 'Bulgaria' },
    { code: 3, name: 'France' },
    { code: 4, name: 'Algeria' },
    { code: 5, name: 'Belgium' },
  ];
  selectedCountry: { code: number; name: string } | undefined; // 新增选中对象变量
}

2. 修改component.html，调整绑定逻辑并更新显示：

<ng-select [items]="countries"
           bindLabel="name"
           bindValue="." <!-- 绑定整个对象，也可以直接删除这一行，默认绑定完整对象 -->
           [searchable]="false"
           [(ngModel)]="selectedCountry">
</ng-select>

<br>
<small>Country Code: {{selectedCountry?.code | json}}</small>
<small>Country Name: {{selectedCountry?.name | json}}</small>

方法二：通过选中的Code直接查找对应Name #

如果不想改动现有selectedCode的绑定逻辑，可在模板里用数组find方法直接匹配名称：

1. 先在component.ts声明selectedCode变量：

export class AppComponent {
  out = new EventEmitter();
  constructor() {}
  countries = [
    { code: 1, name: 'Ukrain' },
    { code: 2, name: 'Bulgaria' },
    { code: 3, name: 'France' },
    { code: 4, name: 'Algeria' },
    { code: 5, name: 'Belgium' },
  ];
  selectedCode: number | undefined; // 声明选中的code变量
}

2. 修改component.html的显示部分：

<ng-select [items]="countries"
           bindLabel="name"
           bindValue="code"
           [searchable]="false"
           [(ngModel)]="selectedCode">
</ng-select>

<br>
<small>Country Code: {{selectedCode | json}}</small>
<small>Country Name: {{countries.find(country => country.code === selectedCode)?.name | json}}</small>

方法三：在TS中封装获取Name的方法 #

也可以在组件内写一个工具方法，根据传入的code返回对应名称，模板直接调用：

1. 在component.ts中添加方法：

export class AppComponent {
  out = new EventEmitter();
  constructor() {}
  countries = [
    { code: 1, name: 'Ukrain' },
    { code: 2, name: 'Bulgaria' },
    { code: 3, name: 'France' },
    { code: 4, name: 'Algeria' },
    { code: 5, name: 'Belgium' },
  ];
  selectedCode: number | undefined;

  getCountryName(code: number | undefined): string | undefined {
    return code ? this.countries.find(country => country.code === code)?.name : undefined;
  }
}

2. 在component.html中调用方法：

<ng-select [items]="countries"
           bindLabel="name"
           bindValue="code"
           [searchable]="false"
           [(ngModel)]="selectedCode">
</ng-select>

<br>
<small>Country Code: {{selectedCode | json}}</small>
<small>Country Name: {{getCountryName(selectedCode) | json}}</small>

内容的提问来源于stack exchange，提问作者Gbenga