Обрабатывать логический фильтр в угловых 5 опционных полях?

Question

HTML

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

Выше приведен HTML-шаблон, я хочу отправить ответ json, показанный ниже, кроме случаев, когда выбран определенный параметр, тогда только это значение должно быть истинным.

JSON

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

Например - Если выбран one, то ответ json должен быть таким: -

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

Как мне справиться с этим в angular 5, есть ли встроенная функция для этого? или есть лучший способ добавить фильтр?

Answer 1

Для достижения ожидаемого результата используйте опцию ниже

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

Answer 2

Загрузите ваш 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}}))