gpt4 book ai didi

angular - 使垫子选项和垫子选择具有不同的用户界面

转载 作者:行者123 更新时间:2023-12-04 17:31:26 25 4
gpt4 key购买 nike

我有一个下拉菜单,其中包含电话号码的国家/地区代码。目前我希望所选项目只有标志图像或代码。下拉列表包含图像、国家代码和国家名称。

<mat-form-field appearance="outline" fullWidth>
<mat-label>Country Code</mat-label>
<mat-select #matSelect [(value)]="selectedCode" [formControlName]="helperService.appConstants.countryCode" (selectionChange)="changeSelection(selectedCode)" required>
<mat-option *ngFor="let code of countryCode" [value]="code.calling_code" (keypress)="numberOnly($event)&&phoneNumberValid(registerObj.userForm)">
<img with="10px" height="10px" src="{{code.flag}}"> {{ code.country }} ({{code.calling_code}})
</mat-option>
</mat-select>
</mat-form-field>


这就是我正在编写的代码。我也有当前用户界面的图像。它们附在下面。

enter image description here enter image description here

我希望所选项目如下图所示。我不知道我应该更改什么以便所选项目仅显示图像。

enter image description here

最佳答案

尝试添加 <mat-select-trigger> :

    <mat-select-trigger>
<img with="10px" height="10px" src="{{code.flag}}">
</mat-select-trigger>

你的代码是这样的:
<mat-form-field appearance="outline" fullWidth>
<mat-label>Country Code</mat-label>
<mat-select #matSelect [(value)]="selectedCode" [formControlName]="helperService.appConstants.countryCode" (selectionChange)="changeSelection(selectedCode)" required>
<!-- Add mat-select-trigger here start -->
<mat-select-trigger>
<img with="10px" height="10px" src="{{code.flag}}">
</mat-select-trigger>
<!-- Add mat-select-trigger here end -->
<mat-option *ngFor="let code of countryCode" [value]="code.calling_code" (keypress)="numberOnly($event)&&phoneNumberValid(registerObj.userForm)">
<img with="10px" height="10px" src="{{code.flag}}"> {{ code.country }} ({{code.calling_code}})
</mat-option>
</mat-select>
</mat-form-field>

恭喜你提出了一个非常好的问题!!

关于angular - 使垫子选项和垫子选择具有不同的用户界面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59305097/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com