javascript - 如何在 Angular 组件的输入元素上正确设置 ID？

Question

我正在尝试寻找解决这种情况的最佳方法。我有一个 Angular 组件，可以构建一张卡片，其中包含您可以编辑的员工信息，我有复选框、文本字段等。

该组件在单个页面上多次构建，每个注册的员工都有一个该组件的实例。我与 checkbox 输入的 id 属性发生冲突；由于该组件已多次构建，因此当我单击第二张卡上的复选框时，选中的框实际上是第一张卡上的复选框。

这是我在组件模板上的结构。

<input type="checkbox" [attr.readonly]="editAgentState ? null : 'readonly'" checked id="card-weekday-mon" class="weekday"
                />
                <label for="card-weekday-mon">Mo</label>
                <input type="checkbox" checked id="card-weekday-tue" class="weekday" />
                <label for="card-weekday-tue">Th</label>
                <input type="checkbox" checked id="card-weekday-wed" class="weekday" />
                <label for="card-weekday-wed">We</label>
                <input type="checkbox" checked id="card-weekday-thu" class="weekday" />
                <label for="card-weekday-thu">Tu</label>
                <input type="checkbox" checked id="card-weekday-fri" class="weekday" />
                <label for="card-weekday-fri">Fr</label>
                <input type="checkbox" id="card-weekday-sat" class="weekday" />
                <label for="card-weekday-sat">Sa</label>
                <input type="checkbox" id="card-weekday-sun" class="weekday" />
                <label for="card-weekday-sun">Su</label>
              </div>

因此，我试图找到为每个复选框设置动态 Id 的最佳方法，以便单击影响所单击的确切复选框。

Answer 1

您可以使用 ts 文件中的变量作为 div 的 id，例如

<input type="checkbox" [attr.readonly]="editAgentState ? null : 'readonly'" checked id={{employee.name}} class="weekday"/>

您可以从 ts 文件中填充员工姓名。这样你的组件的每个实例都会有单独的 id。