在 Angular 5 选项字段中处理布尔过滤器？答案

【问题标题】：Handling Boolean filter in angular 5 options fields?在 Angular 5 选项字段中处理布尔过滤器？
【发布时间】：2018-10-11 14:33:11
【问题描述】：

HTML

<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>

以上是 html 模板，我想发送如下所示的 json 响应，除非选择了特定选项，否则只有该值应为 true。

JSON

 {
     one    : false,
     two    : false,
     three  : false,
     four   : false
 }

例如 - 如果选择了one，那么 json 响应应该是 -

  {
     one    : true,
     two    : false,
     three  : false,
     four   : false
  }

我如何在 Angular 5 中处理这个问题，是否有任何内置函数？或者有没有更好的方法来添加过滤器？

【问题讨论】：

选择一再选择二后json会发生什么，应该重置？？
是单选项，只在提交时调用。
如果是一次，您是否正在寻找类似的东西 - stackblitz.com/edit/angular-sr6nzh?file=app/app.component.ts

标签： javascript typescript frontend angular5

【解决方案1】：

从对象数组中加载您的options，并在您的select 元素上使用双向数据绑定，即：

let options = [
    {
        value: 'one',
        optionName: 'One'
    },
    {
        value: 'two',
        optionName: 'Two'
    },
    {
        value: 'three',
        optionName: 'Three'
    }
]

let selectedOption = 'two'

<select [(ngModel)]="selectedOption ">
...

然后遍历您的选项以构建响应：

console.log(options.map(x => x.value).map(x => { return {[x]: x === selectedOption ? true : false}}))

【讨论】：

【解决方案2】：

要达到预期效果，请使用以下选项

arrList = {
     one    : false,
     two    : false,
     three  : false,
     four   : false
 }
  options =["One","Two","Three","Four"]

  onOptionsSelected(e) {
    let result:any[] =[];
    result = this.arrList;
    result[this.options[e-1].toLowerCase()] = true
    console.log(result);
  }

代码示例 - https://stackblitz.com/edit/angular-sr6nzh?file=app/app.component.ts

【讨论】：