Angular 如何为每个选项动态生成数据自动化id

我是新手。我写了一些代码。它包含两个下拉菜单。我正在使用HTML的简单

select

和

option

标记。它工作得很好。但是QA团队说他们无法测试它。如何在运行时分别为每个选项添加

数据自动化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>

---

有人能告诉我如何在运行时生成自动化ID吗。还是我问错了问题，浪费了大家的时间。在这种情况下，请建议一种替代方法。

将您的选择放入一个迭代两次的

ngFor

，并将其索引作为

数据自动化id

。

---

或者，您可以调用生成随机id的函数

data automation id=“generateradom（）”

将您的选择放入一个迭代两次的

ngFor

，并将其索引设为

data automation id

。

---

或者，您可以调用生成随机id的函数

data automation id=“generateradom（）”

要使选项具有动态数据属性，请尝试使用

[attr.data-*]

向选项添加属性。。你的情况如下

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

{{mode}}

---

若要动态为选项添加数据属性，请尝试使用

[attr.data-*]

向选项添加属性。。你的情况如下

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

{{mode}}

---

---

听起来不错，尼提卡。我试试这个。但我不确定我的代码技术主管在代码审查期间是否会非常高兴。我会告诉你的，这听起来不错。我试试这个。但我不确定我的代码技术主管在代码审查期间是否会非常高兴。我将向您更新。您想将

自动化id

设置为

选择

还是每个

选项

？？这个例子是否解决了您的问题@ManirajMurugan。这会奏效的。请将此作为我接受的答案。谢谢：-）作为答案发布。。很高兴为您提供帮助..您想将

自动化id

设置为

选择

还是每个

选项

？？这个例子是否解决了您的问题@ManirajMurugan。这会奏效的。请将此作为我接受的答案。谢谢：-）作为答案发布。。很高兴帮助你。但是有两个下拉列表。它将为从0,1,2开始的两个对象创建相同的索引。我尝试了第一个下拉列表的

[attr.data automation id]=“options_+'I'”

和

[attr.data automation id]=“previous_uoptions_+'I'”

数据自动化id=“undefinedi”@Tanzeel，您需要这样做

[attr.data automation id]=“options_+'I”

如果要在动态值中附加字符串。。编辑示例哦。我意识到我搞砸了倒逗号。我真蠢。它现在起作用了。嗨，Maniraj，很抱歉告诉你，但我的技术主管不接受这种方法。你能看看这个吗：但是有两个下拉列表。它将为从0,1,2开始的两个对象创建相同的索引。我尝试了第一个下拉列表的

[attr.data automation id]=“options_+'I'”

和

[attr.data automation id]=“previous_uoptions_+'I'”

数据自动化id=“undefinedi”@Tanzeel，您需要这样做

[attr.data automation id]=“options_+'I”

如果要在动态值中附加字符串。。编辑示例哦。我意识到我搞砸了倒逗号。我真蠢。它现在起作用了。嗨，Maniraj，很抱歉告诉你，但我的技术主管不接受这种方法。请您调查一下：