角度材质选择值，显示其他值.我想自定义显示值

Question

我有[value]="country.dial code"；，在垫子选项中，我有两个值｛｛country.dialcode｝｝｝。下拉列表中有拨号代码(国家/地区(名称和(国家/区域(标志。我只想在选择后显示拨号代码

下拉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文件

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..

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>

StackBlitz 上的示例演示