前端之家

  1. 首页
  2. 问答

在Angular Material的下拉菜单中删除部分文本

• 问答

我在<mat-option>中的部分文字需要删除。问题在于所选值丢失了其Html标签。

这是下拉列表：

在Angular Material的下拉菜单中删除部分文本

这是选定的值：

在Angular Material的下拉菜单中删除部分文本

这是HTML代码：

   <div fxLayout="row" fxLayoutAlign="start baseline">
      <span fxFlex="0 0 110px" class="text-sm text-muted-dk">Currency Position</span>
      <div fxLayout="column" fxFlex>
        <mat-form-field fxFlex>
          <mat-select #navigationArrowMode [formControl]="form.controls['currencyPosition']">
            <mat-option
              *ngFor="let currencyPosition of currencyPositions"
              [value]="currencyPosition"
            >
              {{ CurrencyPositionToLabelMapping[currencyPosition] }}</mat-option
            >
          </mat-select>
        </mat-form-field>
      </div>
    </div>

打字稿代码：

    this.PriceOrderToLabelMapping = {
      [PriceOrders.OriginalFirst]: `<del>$110</del>&nbsp;$99&nbsp;Sale`,[PriceOrders.SalePriceFirst]: `$99&nbsp;Sale&nbsp;<del>$110</del>`
    };
sy_exorcist 回答：在Angular Material的下拉菜单中删除部分文本

您需要做的是使用innerHTML来实现<mat-select-trigger>元素，例如：

 <mat-select-trigger>
       <span [innerHTML]="foodCtrl?.viewValue"></span>
    </mat-select-trigger>

完整的示例为： Online Demo 

<mat-form-field>
  <mat-label>Food selection</mat-label>
  <mat-select name="foodCtrl" [(ngModel)]="foodCtrl" >
    <mat-select-trigger>
       <span [innerHTML]="foodCtrl?.viewValue"></span>
    </mat-select-trigger>
    <mat-option *ngFor="let food of foods" 
    [value]="food" >
      <span [innerHTML]="food.viewValue"></span>
    </mat-option>
  </mat-select>
</mat-form-field>
angularangular-material
本文链接：https://www.f2er.com/3155514.html

大家都在问