我有 [value]="country.dial code"，并且在 mat 選項中我有 2 個值 {{country.dialcode}} {{country.name}}。切換下拉選單時，它同時顯示 NAME 和 DIAL-CODE（如預期的那樣），選擇后，所選值同時顯示 name 和 dial code ，我只想顯示撥號代碼。下拉串列有撥號代碼（國家）名稱和（國家）標志。我只是想在選擇后顯示撥號代碼
下拉-Html
<ng-container [formGroup]="DialCode">
<mat-form-field appearance="outline" >
<mat-select formControlName="countryCode" >
<input type="text" aria-label="Number" 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="角度材質選擇值，顯示其他值。我想自定義顯示值">
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
檔案
countryCodeList: COUNTRY[] = CONSTANT.COUNTRY_CODE
filteredCountries!: Observable<COUNTRY[]>
模型
export interface COUNTRY {
name: string
dialCode: string
code?: string
}
模型值
export const COUNTRY_CODE = [
{
name: 'Afghanistan',
dialCode: ' 93',
code: 'AF',
},
{
name: 'Aland Islands',
dialCode: ' 358',
code: 'AX',
},soo on..
uj5u.com熱心網友回復：
您可以使用Mat-Select Trigger自定義所選選項的顯示。
<mat-select formControlName="countryCode">
<mat-select-trigger>
{{ DialCode.controls['countryCode'].value }}
</mat-select-trigger>
<input
type="text"
aria-label="Number"
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="角度材質選擇值，顯示其他值。我想自定義顯示值"
/>
</mat-option>
</mat-select>
StackBlitz 上的示例演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/431921.html