样式垫选择值

Question

我希望有人能帮助我，我正在使用有角度的材料，我有这个选择，当我看到选项时，它看起来很好，但如果我选择了一个，强标签将不再出现，你知道我如何只对该部分进行样式设置，提前感谢

<mat-select formControlName="projectId" placeholder="project" [disabled]="enableList">
<mat-option *ngFor="let projects of arrayProjects" [value]="projects.nameProject" (click)="projectSelected(projects)">
{{projects.nameProject}} &nbsp; - <strong> {{projects.id}} </strong> - &nbsp; {{projects.PEP | pepFormat}}
</mat-option>
</mat-select>

img 1img 2

Answer 1

您需要做的是自定义当选择某个选项时出现在选择框中的模板。为此，您可以使用mat-select-trigger指令。

<mat-select #projectSelect formControlName="projectId" placeholder="project" [disabled]="enableList">
<mat-select-trigger>
{{projectSelect.value.nameProject}} &nbsp; - <strong> {{projectSelect.value.id}} </strong> - &nbsp; {{projectSelect.value.PEP | pepFormat}}
</mat-select-trigger>
<mat-option *ngFor="let projects of arrayProjects" [value]="projects.nameProject" (click)="projectSelected(projects)">
{{projects.nameProject}} &nbsp; - <strong> {{projects.id}} </strong> - &nbsp; {{projects.PEP | pepFormat}}
</mat-option>
</mat-select>

请注意，我使用了一个模板引用来访问select组件值。或者，您可以使用formControl来获取值，而不是模板引用。如果您愿意，请将相关的TS代码添加到您的答案中。

演示