如何在 mat-select 中显示选定的图像

Question

我的目标是在 mat-select 中显示 Harvey Balls。最初我使用 Unicode，但在测试 iPhone、Android 和 Linux 之后，我发现只有 Windows 似乎在每个球上都有统一的大小。我对选项内的球所做的任何样式更正在下拉菜单中都可以正常工作，但在选择中却不行。我切换到 SVG 并决定将其作为一个模块来轻松支持多个 css 主题。

我遇到的问题是 SVG 没有出现在所选值上。它们在下拉列表中显示良好。

如何让选定的值在选择和下拉列表中呈现相同？

哈维球.html

<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" >
<circle class="harvey-svg" cx="7" cy="7" r="6.5"></circle>
<path *ngIf="status >= 1" d="M 7,0 A 7,7 0 0 1 14,7 L 7,7 z" class="harvey-fill-svg"></path>
<path *ngIf="status >= 2" d="M 14,7 A 7,7 0 0 1 7,14 L 7,7 z" class="harvey-fill-svg"></path>
<path *ngIf="status >= 3" d="M 7,14 A 7,7 0 0 1 0,7 L 7,7 z" class="harvey-fill-svg"></path>
<path *ngIf="status == 4" d="M 0,7 A 7,7 0 0 1 7,0 L 7,7 z" class="harvey-fill-svg"></path>

哈维球.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-harvey-ball',
    templateUrl: './harvey-ball.html',
  })
export class HarveyBallComponent {
    @Input() status: number;
}

app.component.html

Current Status:
<mat-form-field>
    <mat-select [(ngModel)]="selectedStatus">
        <mat-option [value]=0><app-harvey-ball [status]=0></app-harvey-ball> Not Started</mat-option>
        <mat-option [value]=1><app-harvey-ball [status]=1></app-harvey-ball> Started</mat-option>
        <mat-option [value]=2><app-harvey-ball [status]=2></app-harvey-ball> In Progress</mat-option>
        <mat-option [value]=3><app-harvey-ball [status]=3></app-harvey-ball> Near Completion</mat-option>
        <mat-option [value]=4><app-harvey-ball [status]=4></app-harvey-ball> Complete</mat-option>
    </mat-select>
</mat-form-field>

在这里演示https://stackblitz.com/edit/angular-g4epvw

Answer 1

Angular-material mat-select 不支持输出下拉列表中的 html。您可以通过在 Not <strong>Started</strong> 周围包裹一个 strong 来测试它，并注意它不会复制到 dom 中。如果需要，您必须滚动自己的图像：

类似：

Current Status:
<mat-form-field>
  <app-harvey-ball [status]=selectedStatus></app-harvey-ball>
    <mat-select [(ngModel)]="selectedStatus">
        <mat-option [value]=0>Not <strong>Started</strong></mat-option>
        <mat-option [value]=1><app-harvey-ball [status]=1></app-harvey-ball> Started</mat-option>
        <mat-option [value]=2><app-harvey-ball [status]=2></app-harvey-ball> In Progress</mat-option>
        <mat-option [value]=3><app-harvey-ball [status]=3></app-harvey-ball> Near Completion</mat-option>
        <mat-option [value]=4><app-harvey-ball [status]=4></app-harvey-ball> Complete</mat-option>
    </mat-select>
</mat-form-field>

但你必须摆弄 css。