时间戳

首页 > 解决方案 > 如何在选中的Angular 8复选框上加入逗号分隔字符串中的值

javascript - 如何在选中的Angular 8复选框上加入逗号分隔字符串中的值

问题描述

我在 api 中的复选框 chnages 事件上传递值。

我想在复选框更改时在 URL 中传递逗号分隔值，如下例所示。

代码=ABC、DEF、RED

并删除复选框未选中事件的值，如下例 code=ABC,DEF

任何人都可以帮我做到这一点。

下面是我的代码

onChange(event, Code) {
    if (event.checked) {
      this.newCode = Code;
    } else {
      this.newCode = '';
    }    
  }

标签： javascriptjqueryangular

解决方案

简单的解决方案可能是。

在 component.ts 文件中

code: string;
selectedValues = [];

selectCheckBox(evt, val) {
  const status = evt.target.checked;

  if (status) {
    this.selectedValues.push(val)
  } else {
    this.selectedValues = this.selectedValues.filter((v) => v!==val)
  }

  this.code = this.selectedValues.join(',')
}

onSubmit() {
  let url = 'api.example.com/';
  url = `${url}/&code=${this.code}`;

  console.log(url);

  // write you logic call api etc
}

在模板中

<ul>
  <li><input type="checkbox" name="chbx1" value="AB" (change)="selectCheckBox($event, 'AB')"></li>
  <li><input type="checkbox" name="chbx2" value="CD" (change)="selectCheckBox($event, 'BC')"></li>
  <li><input type="checkbox" name="chbx3" value="ED" (change)="selectCheckBox($event, 'CD')"></li>
</ul>

<button type="button" (click)="onSubmit()">Submit</button>

工作演示

希望这能解决您的问题。

推荐阅读