Получить значения из строкового массива Dynami c в Typescript

Question

В angular материальной форме у меня есть поле с mat-option, которое содержит список опций (т. Е. A, b, c, d, e). Когда пользователь выбирает / отменяет выбор одного конкретного параметра (например, c), мне нужно сделать некоторые манипуляции. Но я получаю неопределенную ошибку, даже если я выбираю опцию 'c', не выбирая другую опцию.

Я могу понять, что это связано со значением индекса [2], которое я использовал. Я не уверен, как определить, выбрал ли пользователь опцию 'C' или нет, поскольку его значение индекса может динамически увеличиваться или уменьшаться в зависимости от выбора пользователя.

Массив ответов может выглядеть следующим образом:

value = {'d','c'} or value = {'c','b','a'} or value = {}

if(value[2] === 'c') {
   console.log('c');
 } 

Может ли кто-нибудь помочь мне написать машинописный код?

Answer 1

Возможно, в вашем коде отсутствует вещь. Поскольку вы сказали нам, что используете mat-option, я попытался создать пример кода, используя это.

component. html

<h4>mat select</h4>
<mat-form-field>
  <mat-label>Choose option</mat-label>
  <mat-select [formControl]="optionControl" required (valueChange)="onChange($event)">
    <mat-option>--</mat-option>
    <mat-option *ngFor="let option of options" [value]="option">
      {{option}}
    </mat-option>
  </mat-select>  
</mat-form-field>

<div>
  <p>Selected value</p>
  {{ optionControl.value }}
</div>

component.ts

import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-example',
  templateUrl: 'app-example.html',
  styleUrls: ['app-example.css'],
})
export class AppExampleComponent {
  optionControl = new FormControl('', Validators.required);  
  options = ['a', 'b', 'c']; // this is static but should be dynamic for your case

  onChange(value: string) { // value will be selected option
    if (value === 'c') {
      console.log('c');
    }
  }
}

Посмотрите на действие StackBlitz

Answer 2

Я не думаю, что value = {'d','c'} or value = {'c','b','a'} or value = {} является чем-то вроде git синтаксиса JavaScript / TypeScript для объектов. Если вы не имели в виду что-то вроде {c: 'c'}

В этом случае это объект, и вам нужно либо Object.keys(), либо Object.values(), чтобы сначала преобразовать его в массив.

const value = {
  c: 'c',
  b: 'b',
  a: 'a'
};

if(Object.values(value).includes('c')) {
  console.log('c');
} else {
  console.log('NO c'); 
}

Answer 3

Допустим, пользователь может выбрать несколько вариантов. Вам нужно подписаться на изменение выбора или вызывать метод из HTML всякий раз, когда происходит изменение. Например, все выбранные значения сохраняются в переменной values. То, как выбранные значения хранятся в values, зависит от того, как вы обнаружите изменение. После каждого изменения выбора разбивайте эту переменную на массив, например:

let valuesArray = values.toString().split(',');

Затем проверяйте каждый элемент массива:

valuesArray.forEach(v => { if (v === 'c') { console.log('c'); } });