Question

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

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

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

哈维-ball.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>

哈维-ball.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>周围包裹一个强大的方法来测试它，并注意它不会复制到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。

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

1 个答案: