Question

我正在使用此Angular代码生成复选框：

<div class="col-2" *ngFor="let item of selectedUsers; let idx=index">
  <input name="SelectedEntity" value="{{item}}" type="checkbox">
</div>

我想将选中的复选框转换为逗号分隔的字符串，如下所示：

selectedEntity:"users1, users2"

我该怎么做？

Answer 1

您已经拥有了selectedUsers数组，SelectedEntity将返回一个布尔数组。只需遍历selectedUsers，如果checkbox数组为TRUE，则将该索引处的元素推送到新数组中。完成后，只需使用join Javascript函数来分隔列表。

let selectedArray = [];
for (let index=0; index < selectedUsers.length; index++) {
  if(SelectedEntity[index] === true) {
    selectedArray.push(selectedUsers[index]);
  }
}
selectedArray.join(", ");

Answer 2

Html：

<div class="col-2" *ngFor="let item of selectedUsers; let idx=index">
     <input [(ngModel)]="item.isSelected" type="checkbox">
</div>

组件：

var result = "";
for(let i = 0; i < this.selectedUsers.length; i++) {
    if(this.selectedUsers[i].isSelected) {
         if(result != "") {
             result += ", ";
         }
         result += this.selectedUsers[i].name;
    }
}
console.log("selectedEntity:\"" + result + "\"");

如果您不想从selectedUsers中创建对象列表，您可以随时使用其他列表：

Html：

<div class="col-2" *ngFor="let item of selectedUsers; let idx=index">
     <input [(ngModel)]="selection[idx]" type="checkbox">
</div>

组件：

var result = "";
for(let i = 0; i < this.selection.length; i++) {
    if(this.selection[i]) {
         if(result != "") {
             result += ", ";
         }
         result += this.selectedUsers[i];
    }
}
console.log("selectedEntity:\"" + result + "\"");

虽然我不推荐这种方法，因为选择与项目相关联，并且应该在模型中表示。

如何将复选框转换为逗号分隔的字符串

2 个答案: