Question

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
  }

我如何处理角度5，是否有任何内置功能？或者有更好的方法来添加过滤器吗？

Answer 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}}))

Answer 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

处理角度5选项字段中的布尔过滤器？

2 个答案: