如何在角度应用程序中使用引导切换按钮进行开和关

Question

我想在 Angular 中使用引导切换按钮（开关按钮）。（组件必须动态来自后端）。

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

.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() 内部的实现是什么。这也可能导致问题。我们从两个地方都删除了函数调用。