样式垫选择值

【问题标题】：Style mat-select value样式垫选择值
【发布时间】：2021-08-16 22:55:39
【问题描述】：

我希望有人可以帮助我，我正在使用有角度的材料，我有这个选择，当我看到选项时它看起来很好但是如果我选择一个强大的标签不再出现，你知道我怎么可以只设计那个部分，在此先感谢

<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 1 img 2

【问题讨论】：

你能上传图片让我了解你的问题
我已经加了，第一个好强，第二个是我选的时候

标签： javascript css angular typescript angular-material

【解决方案1】：

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

<mat-select formControlName="projectId" placeholder="project" [disabled]="enableList" #projectSelect>
  <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>

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

Demo

【讨论】：