如何在 angular 应用程序中使用 bootstrap 切换按钮打开和关闭

Question

我想在angular中使用bootstrap切换按钮（切换按钮）。（组件必须动态来自后端）。

我试过了，但是切换开关不能正常工作。

.component.html

<div *ngFor ="let sensor of sensors;let i =index"  (ngModelChange)="dataChanged(selectsensor)" >
<div class="custom-control custom-switch">
  
    <input type="checkbox" class="custom-control-input" (click)="dataChanged(sensor,i)" id="customSwitches">
    <label class="custom-control-label" for="customSwitches">
    {{sensor.name}}  </label>

</div>
</div>

Answer 1

你能告诉我们你在函数调用中试图做什么 dataChanged() 你正在用不同的参数调用同一个函数。

来自这个结构

<input type="checkbox" 
class="custom-control-input" 
(click)="dataChanged(sensor,i)" id="customSwitches">
<label class="custom-control-label" for="customSwitches">
{{sensor.name}}  </label>

至

<input
  type="checkbox"
  class="custom-control-input"
  id="customSwitches{{i}}"
/>
<label class="custom-control-label" for="customSwitches{{i}}">
{{sensor.name}}  </label>

元素的 ID 在您的结构中重复 n 次（n - 传感器数量） 次。按照标准，我们不能复制相同的 ID。所以请为它索引传感器。现在它对我有用。

注意：我们不知道dataChanged()函数内部的实现是什么。这也可能导致问题。我们从两个地方都删除了函数调用。