Angular Material Select 值，显示其他值。我要自定义显示值

Question

我有 [value]="country.dial 代码"，在 mat 选项里面我有 2 个值 {{country.dialcode}} {{country.name }}。当下拉列表被切换时，它同时显示 NAME 和 DIAL-CODE（如预期的那样），并且在选择后，所选值同时显示 name 和 dial code ，我只想显示拨号代码。下拉菜单有拨号代码（国家）名称和（国家）标志。我只是想在选择

后显示拨号代码

Drop-down-Html

<ng-container [formGroup]="DialCode">
  <mat-form-field  appearance="outline" class="mb-0 mt-3 country-code px-1" >
    
    <mat-select class="w-100" formControlName="countryCode" >
      <input type="text" aria-label="Number" class="py-1 search" formControlName="countryCodeInput" matInput name="phoneCode" placeholder="search country code" >      
      <mat-option *ngFor="let country of filteredCountries | async" [value]="country.dialCode">
        {{country.dialCode}} {{country.name}}
        <img width="20" height="20" [src]="'assets/images/flags/'+parse(country.code) +'.svg'" alt="img">
      </mat-option>
    </mat-select>
  </mat-form-field>
</ng-container>

TS FILE

countryCodeList: COUNTRY[] = CONSTANT.COUNTRY_CODE
  filteredCountries!: Observable<COUNTRY[]>

Model

export interface COUNTRY {
    name: string
    dialCode: string
    code?: string
}

Model values

export const COUNTRY_CODE = [
    {
        name: 'Afghanistan',
        dialCode: '+93',
        code: 'AF',
    },
    {
        name: 'Aland Islands',
        dialCode: '+358',
        code: 'AX',
    },soo on..

Answer 1

您可以使用Mat-Select Trigger自定义所选选项的显示。

<mat-select class="w-100" formControlName="countryCode">

  <mat-select-trigger>
    {{ DialCode.controls['countryCode'].value }}
  </mat-select-trigger>

  <input
    type="text"
    aria-label="Number"
    class="py-1 search"
    formControlName="countryCodeInput"
    matInput
    name="phoneCode"
    placeholder="search country code"
  />
  <mat-option
    *ngFor="let country of filteredCountries | async"
    [value]="country.dialCode"
  >
    {{ country.dialCode }} {{ country.name }}
    <img
      width="20"
      height="20"
      [src]="'assets/images/flags/' + parse(country.code) + '.svg'"
      alt="img"
    />
  </mat-option>
</mat-select>

Sample Demo on StackBlitz

Angular Material Select 值，显示其他值。我要自定义显示值

Angular Material Select Value, displaying other values . I want to customize display value

angular-material

angular