angular - 如何在 mat-select 中显示选定的图像
问题描述
我的目标是在 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>
解决方案
Angular-materialmat-select
不支持输出下拉列表中的 html。你可以通过只包裹一个 strong 来测试它,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。
推荐阅读
- c - 为什么使用c不能在函数外访问函数中的内存空间malloc
- java - Spring boot 没有从 Maven 项目中的 soap wsdl 生成 java 类。这是我的 pom.xml
- windows - 如何在 Rust 中创建一个继承自 C++ 中定义的 COM 对象的 COM 对象?
- javascript - 同级组件不接收发出的更改
- algorithm - 代表顶点循环覆盖
- reactjs - 如何通过 React 动态显示数据列表?
- javascript - Redux Store 向原始选择添加重复内容和导航产生空数组
- c# - 如何在 C# 中添加永远不会用于表达式树的参数?
- java - 如何在sqlite db中保存特定列的历史记录
- c# - 使用 Prism for UWP App 的松散耦合组件之间的通信