如何为每个选项动态生成 data-automation-id

Question

我是 Angular 的新手。我写了一些代码。它包含两个下拉菜单。我正在使用 HTML 的简单 select 和 option 标签。它工作得很好。但 QA 团队表示他们无法对其进行测试。如何在运行时分别为每个选项添加 data-automation-id。我正在使用 ngFor 从同一个数组中读取选项。这是我的代码。

mycalendar.component.html

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

...

<select data-automation-id="timeselection-mode-secondary">
  <option *ngFor="let mode of modes">
      Previous {{ mode }}
  </option>
</select>

不涉及反应形式。普通 HTML 标签。

mycalendar.component.ts

modes=['Year', 'Quarter', 'Sprint'];

谁能告诉我如何在运行时生成自动化 ID。还是我问错了问题，浪费了大家的时间。请在这种情况下提出替代方案。

Answer 1

将您的 select 放入迭代两次的 ngFor 中，并将其索引指定为 data-automation-id。或者，您可以调用生成随机 id data-automation-id="generateRandom()"

的函数

Answer 2

要动态地为选项添加数据属性，请尝试使用 [attr.data-*] 向选项添加属性。在您的情况下如下所示。

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

Working example here...

如何为每个选项动态生成 data-automation-id

How to generate data-automation-id for each option dynamically

angular

typescript

angular-test