如何在动态设置 data-automation-id 时修剪空格

Question

我正在 Angular 中制作一个简单的时间选择小部件，以将我们当前的性能与之前的性能进行比较。我的小部件包含两个dropdown 列表和一些按钮和输入字段（忘记按钮和输入字段）。我的问题是关于这些下拉列表的测试。这是我的代码：

timeselector.component.html

<select data-automation-id="timeselection-mode-primary">
  <option *ngFor="let mode of modes" [attr.data-automation-id]="'options_' + mode">
    {{ mode }}
  </option>
</select>

<!--some input fields and toggle button goes here-->

<select data-automation-id="timeselection-mode-secondary">
  <option *ngFor="let mode of modes" [attr.data-automation-id]="'previous_options_' + mode">
    Previous {{ mode }}
  </option>
</select>

他们都在我的打字稿中从同一个数组中读取modes：

timeselector.component.ts

modes=['Calendar year', 'Year-to-date', 'Quarter', 'Monthly Pipe', 'Weekly Sprint']

我的问题是，Calendar year、Monthly Pipe 和 Weekly Sprint 有空格。所以，这样我的data-automation-id 将如下：

options_Calendar year、options_Monthly Pipe、options_Weekly Sprint。

为了解决这个问题，我在每个选项中引入了index 值，如下所示：

<option *ngFor="let mode of modes; let i=index"
                [attr.data-automation-id]="'options_' +i">

和

<option *ngFor="let mode of modes; let i=index"
                [attr.data-automation-id]="'previous_options_' +i">

这也有效。但我的技术主管对这种索引方法不太满意。她希望我只使用mode。她告诉我使用truncate、trim 或任何现有的解决方案，但没有索引。

我知道如何使用truncate、trim、subString 等方法。但我无法弄清楚如何在运行时使用数据自动化 ID 来做到这一点。我尝试了其他一些解决方案，但没有奏效。请帮帮我。

小部件如下所示：

Answer 1

如果要删除字符串之间的空格，可以将字符串传递给函数并获取split（带空格）和join（带破折号-）之类的，

  getModifiedText(mode){
    const splitMode = mode.split(' ');
    const joinMode = splitMode.join('-')
    return joinMode;
  }

所以修改文件，如，

component.html：

<select data-automation-id="timeselection-mode-primary">
  <option *ngFor="let mode of modes;" [attr.data-automation-id]="'options_'+ getModifiedText(mode)">
      {{ mode }}
  </option>
</select>

component.ts：

  getModifiedText(mode){
    const splitMode = mode.split(' ');
    const joinMode = splitMode.join('-')
    return joinMode;
  }

我已经给了splitMode.join('-')，您可以根据需要更改此部分。例如：splitMode.join('_')..

正在工作Stackblitz here...

Answer 2

将data-automation-id 的生成委托给控制器部分（TS 文件）而不是模板（HTML）怎么样？

说timeselector.component.ts，而不是拥有

modes=['Calendar year', 'Year-to-date', 'Quarter', 'Monthly Pipe', 'Weekly Sprint']

改用这个：

modes = {
  name: 'Calendar year',
  id: 'options_calendar_year',
  ...
}

然后在timeselector.component.html 你可以拥有：

<select data-automation-id="timeselection-mode-primary">
  <option *ngFor="let mode of modes" [attr.data-automation-id]="mode.id">
    {{ mode.name }}
  </option>
</select>