Home / Questions / 183828
Accepted
Manolait
Asked: 2020-07-26 03:12:54 +0800 CST 2020-07-26 03:12:54 +0800 CST

CheckBox Angular 4 ngfor选择问题

  • 772

我正在设计一个带引导程序的模态，在其中我有一个通过 NGFOR 加载的复选框列表。

问题在于以下问题：选择其中一个元素时，选择了所有复选框，我也不很清楚如何从component.ts中的选择复选框接收信息。

如何只选择我想要的值？并将信息发送到我的组件？

这是我的代码：

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-lg-6 col-6" *ngFor="let data of sensor">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="data.name" name= "miDataInterior" [(ngModel)]="miDataInterior">
        <label class="form-check-label" for="inlineCheckbox1">{{data.name}}</label>
      </div>
    </div>
  </div>

</div>

图片复选框

EDIT01

你好，

我在 ngfor 中绘制的信息如下：

["var_TempExt","var_HumRExt","var_HumRInt","var_Humedad_Sust1","var_Humedad_Sust2","var_PotActInv","var_PotActBio","var_ContadorRiego","var_RadiacionGlobalInt","var_RadiacionPARInt","var_CO2InvVaisala","var_TempInt","var_RadiacionExt","var_CO2Exterior","var_VVExt","var_DVExt","var_Lluvia","act_AbrirVentanaCen","act_AbrirVentanaLatNS","act_Aerotermo","act_BombaCalefaccion","act_Deshumificacion","act_Humidification","act_LuzArtificial","act_ValvulaTresVias"]

我需要能够选择任何这些名称并将该名称以数组的形式发送到我的组件，然后将其传递给服务。

在 ts 中，我有一个简单的方法可以向我展示模态所具有的信息，但我只能得到一个真实的

public guardar(){
      console.log('formulario posteado: ' + this.checkbox);
    }
angular

2 Answers

  1. Best Answer

    我解决问题的想法：

    在组件中创建一个带有复选框字段的结构：

    //asumo que sensor es el array ["var_TempExt", "var_HumRExt", "var_HumRInt", ... ]
checkboxes= {};
sensor.forEach(nombre => checkboxes[nombre]=false);

    因此，您将拥有一个具有与初始化为 false 的每个复选框相同的属性的对象。

    然后你做类似的事情：

    <div class="col-md-6 col-lg-6 col-6" *ngFor="let data of sensor; let i= index">
    <input class="form-check-input" type="checkbox" name= "miDataInterior" 
        [(ngModel)]="checkboxes[data.name]" id="{{'inlineCheckbox' + i}}">

    <label class="form-check-label" for="{{'inlineCheckbox' + i}}">{{data.name}}</label>
</div>
    • 0

  2. TL;DR：您正在链接miDataInterior到所有复选框

    为了解决它，有无数种可能的解决方案。您必须了解的是，当您执行[(ngModel)]="miDataInterior"每个复选框时，您将该变量绑定到所有复选框。如果miDataInterior它改变，它们都会改变。

    一个简单的解决方案是不使用绑定，而是使用 DOM 事件。当用户更改复选框的值时，将该元素添加或删除到将成为结果的数组中。这是通过事件实现的，(change)并检查target.checked事件是否处于活动状态：

    <input class="form-check-input" type="checkbox" 
  name= "miDataInterior" (change)="$event.target.checked ? agregar(data) : quitar(data)">

    在组件中：

      agregar(data: string) { // Agregamos el elemento
    this.miDataInterior.push(data);
  }

  quitar(data) { // Filtramos el elemento para que quede fuera
    this.miDataInterior = this.miDataInterior.filter(s => s !== data);
  }

    这样您就可以使用字符串数组或任何数据类型。您可以在此 Stackblitz中找到有效的解决方案。在那里你可以看到它也适用于对象数组。

    当然，您可以找到其他解决方案，但您必须了解每个解决方案都必须分别checkbox具有其变量。

    • 0