angular 如何获取select选中option的data属性值

Question

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-select-basic',
  template: `
    <div>
      <nz-select style="width: 120px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose">
        <nz-option data-type="杀戮" nzValue="jack" nzLabel="Jack"></nz-option>
        <nz-option data-type="玩儿" nzValue="lucy" nzLabel="Lucy"></nz-option>
        
      </nz-select>
      
    </div>
  `,
  styles: [
    `
      nz-select {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoSelectBasicComponent {
  selectedValue = 'lucy';
}

Answer 1

可以间接获取，具体方法可参照ng-zorro的文档说明里的获取选项的对象实例：

import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-select-label-in-value',
  template: `
    <p>The selected option's age is {{ selectedValue?.age }}</p>
    <br />
    <nz-select
      style="width: 120px;"
      [compareWith]="compareFn"
      [(ngModel)]="selectedValue"
      (ngModelChange)="log($event)"
      nzAllowClear
      nzPlaceHolder="Choose"
    >
      <nz-option *ngFor="let option of optionList" [nzValue]="option" [nzLabel]="option.label"></nz-option>
    </nz-select>
  `
})
export class NzDemoSelectLabelInValueComponent {
  optionList = [{ label: 'Lucy', value: 'lucy', age: 20 }, { label: 'Jack', value: 'jack', age: 22 }];
  selectedValue = { label: 'Jack', value: 'jack', age: 22 };
  // tslint:disable-next-line:no-any
  compareFn = (o1: any, o2: any) => (o1 && o2 ? o1.value === o2.value : o1 === o2);

  log(value: { label: string; value: string; age: number }): void {
    console.log(value);
  }
}

当然了，也可以用filter的方法查找出对象的某个属性

不过都不太直观，但也只能这样了