Как отобразить выбранное изображение в mat-select - PullRequest
Новая
       8

Как отобразить выбранное изображение в mat-select

0 голосов
/ 08 мая 2018

Моя цель - показать Harvey Balls в коврике. Первоначально я использовал Unicode, но обнаружил, что только Windows, кажется, имеет одинаковые размеры по всем шарам после тестирования iPhone, Android и Linux. Любые корректировки стиля, которые я внес в шар внутри опции, работали нормально в выпадающем меню, но не при выборе. Я переключился на SVG и решил сделать это как модуль, чтобы легко поддерживать несколько тем CSS.

У меня проблема в том, что SVG не отображается с выбранным значением. Они хорошо отображаются в раскрывающемся списке.

Как получить выбранное значение для отображения одинаковым как в выделении, так и в раскрывающемся списке?

Harvey-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>

Harvey-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

1 Ответ

0 голосов
/ 08 мая 2018

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.

...