如何在垫选择值上添加色块？

Question

我在 Angular 项目中使用 mat-select 来显示下拉值。下拉选项包括三个值：shiftCode、shiftStartTime 和 shiftEndTime。这些值被组合并显示在下拉列表中。但是，做出选择后，我只想在占位符中显示 shiftCode 以及与下拉选项中的 colorAssigned 变量相对应的颜色块。

这是我当前的代码：

<ng-container>
  <span 
    class="font-weight-bold" 
    [style.color]="this.calendarGrid[j][p].disable ? '#cbcccb' : null">
    {{ this.calendarGrid[j][p].date }}
  </span>
  <mat-select 
    [(value)]="this.calendarGrid[j][p].dropdownValue"
    (openedChange)="onDropdownToggle($event)"
    [pTooltip]="tooltipContent"
    tooltipPosition="bottom"
    [panelClass]="'custom-select-panel'"
    class="mat-select-custom-width-dropdown"
    (selectionChange)="onGridSelectionChange($event, j, p)"
    [disabled]="this.calendarGrid[j][p].disable"
    [ngClass]="this.calendarGrid[j][p].disable ? 'search_select-week' : ''"
    class="search_select_shift custom_placeholder w-100"
    placeholder="Select">

    <div class="mat_search">
      <div class="search-icon">
        <input type="text" name="filter-options" class="input_search" placeholder="Type...">
        <img src="assets/img/search-icon.svg" alt="search-icon">
      </div>
      <mat-option [value]="">Select</mat-option>
      <mat-option [value]="'A'">Weekly Off</mat-option>
      <mat-option *ngFor="let option of shiftDropDownList" [value]="option.shiftCode" class="d-flex align-items-center">
        {{ option.shiftCode + ' | ' + option.shiftStartTime + '-' + option.shiftEndTime }}
      </mat-option>
    </div>
  </mat-select>
</ng-container>

在这个特定的代码中，我使用 mat-select，其中显示下拉值，下拉值包含三个值（shiftCode、shiftStartTime、shiftEndTime），它们在下拉列表中组合显示，但在选择之后我想仅显示仅具有分配在块上的颜色的shiftCode，如图所示。

在这里，在下拉数组中，我在选项中有一个 colorAssigned 变量（我可以像 option.colorAssigned 一样使用它，给出结果 '#fff'）

Answer 1

您可以将

ng-template

与

mat-select

组件一起使用来定义所选值的显示方式。这允许您显示

shiftCode

以及色块（使用

colorAssigned

）。

<ng-container>
  <span 
    class="font-weight-bold" 
    [style.color]="this.calendarGrid[j][p].disable ? '#cbcccb' : null">
    {{ this.calendarGrid[j][p].date }}
  </span>

  <mat-select 
    [(value)]="this.calendarGrid[j][p].dropdownValue"
    (openedChange)="onDropdownToggle($event)"
    [pTooltip]="tooltipContent"
    tooltipPosition="bottom"
    [panelClass]="'custom-select-panel'"
    class="mat-select-custom-width-dropdown"
    (selectionChange)="onGridSelectionChange($event, j, p)"
    [disabled]="this.calendarGrid[j][p].disable"
    [ngClass]="this.calendarGrid[j][p].disable ? 'search_select-week' : ''"
    class="search_select_shift custom_placeholder w-100"
    placeholder="Select">

    <div class="mat_search">
      <div class="search-icon">
        <input type="text" name="filter-options" class="input_search" placeholder="Type...">
        <img src="assets/img/search-icon.svg" alt="search-icon">
      </div>
      <mat-option [value]="">Select</mat-option>
      <mat-option [value]="'A'">Weekly Off</mat-option>

      <!-- Options in the dropdown -->
      <mat-option *ngFor="let option of shiftDropDownList" [value]="option" class="d-flex align-items-center">
        {{ option.shiftCode + ' | ' + option.shiftStartTime + '-' + option.shiftEndTime }}
      </mat-option>
    </div>

    <!-- Customize selected value -->
    <ng-template matSelectTrigger>
      <div class="d-flex align-items-center">
        <div 
          class="color-block" 
          [style.background-color]="calendarGrid[j][p].dropdownValue?.colorAssigned || '#000000'" 
          style="width: 16px; height: 16px; border-radius: 2px; margin-right: 8px;">
        </div>
        <span>{{ calendarGrid[j][p].dropdownValue?.shiftCode || 'Select' }}</span>
      </div>
    </ng-template>
  </mat-select>
</ng-container>