Angular：删除 [ngValue] 绑定字符串的最后 4 个字符答案

【问题标题】：Angular: Remove last 4 Characters of [ngValue] Binded StringAngular：删除 [ngValue] 绑定字符串的最后 4 个字符
【发布时间】：2018-09-22 18:36:34
【问题描述】：

我想将我的 [ngValue] 属性绑定到删除了最后 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>

这是我从中提取的模型以及我在打字稿中如何使用它：

型号

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

打字稿

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 和我的函数调用中进行拼接，但都没有奏效。

【问题讨论】：

标签： angular typescript select dropdown

【解决方案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>

【讨论】：

当我这样做时，字符串仍然是原始字符串吗？即使我在函数调用中打印出来

【解决方案2】：

Splice 未被识别为函数，并且由于某种原因 slice 什么也没做，但我能够通过在我的 insertSymbol 方法中创建一个子字符串来使其工作

【讨论】：