Angular:删除 [ngValue] 绑定(bind)字符串的最后 4 个字符

Question

我想将我的 [ngValue] 属性绑定(bind)到一个删除了最后 4 个字符的字符串，事先使用 ngFor 执行此操作的最佳方法是什么？这是代码:

<select
        id="symbolInLineSelector"
        (change)="insertSymbol($event.target.value)"
        class="ql-size"
        title="symbolSelect">
        <option
          *ngFor="let symbol of keys(symbols)"
          [ngValue]="symbol"
          [innerHtml]="symbols[symbol]">
        </option>
</select>

这是我从中提取的模型以及我如何在 typescript 中使用它:

型号

export enum Symbols {
  'equivales' = '\u2261             ;eq',
  'notEquivales' = '\u2262             ;nev',
  'implies' = '\u21d2             ;im',
  'not' = '\u00AC             ;not',
  'conjunction' = '\u22c0             ;an',
  'disjunction' = '\u22c1             ;or',
  'emptySet' = '\u2205             ;es',
  'union' = '\u222A             ;un',
  'intersection' = '\u2229             ;in',
  'powerSet' = '\u2118             ;ps',
  'gets' = '\u2254             ;=',
  'genericQuantifier' = '\u2605             ;st',
  'atLeast' = '\u2264             ;ge',
  'atMost' = '\u2265             ;le',
  'elementOf' = '\u2208             ;el',
  'notElementOf' = '\u2209             ;nel',
  'properSuperset' = '\u2283             ;pp',
  'superset' = '\u2287             ;sp',
  'notProperSubset' = '\u2284             ;npb',
  'notSubset' = '\u2288             ;nsb',
  'notProperSuperset' = '\u2285             ;npp',
  'notSuperset' = '\u2289             ;nsp'
}

typescript

import {Symbols} from '../../model/symbols';

keys = Object.keys;
symbols = Symbols;

insertSymbol(selectedVal) {
this.editorInstance.insertText(this.previousEditorSelection, selectedVal.splice(0,-4));
this.editorInstance.setSelection(this.previousEditorSelection.index + selectedVal.length + 1);
this.previousEditorSelection = this.editorInstance.getSelection();
  }

所以目前我的网页显示了一个如下所示的下拉菜单:

这很好，但是当我单击其中一个选项并将其输入到编辑器中时，它会将快捷键代码保留在右侧，而实际上我只想在单击时将 unicode 字符插入到编辑器中。有没有办法在 [ngValue] 中拼接字符串，以便下拉列表显示所有信息，但插入会删除最后 4 个字符？正如您在上面看到的那样，我已经尝试直接在 ngValue 和函数调用中拼接，但都没有用。

Answer 1

使用 slice pipe .

<select
    id="symbolInLineSelector"
    (change)="insertSymbol($event.target.value)"
    class="ql-size"
    title="symbolSelect">
    <option
      *ngFor="let symbol of keys(symbols)"
      [ngValue]="symbol | slice:0:-4"
      [innerHtml]="symbols[symbol]">
    </option>
</select>