从 Typescript 中的动态字符串数组中获取值

Question

In angular material form, I have a field with mat-option which contains list of options(ie, a, b, c, d, e). When user selects/unselects one particular option(ie, c), I need to do some manipulation. But I am getting undefined error, even if I select an option 'c' without selecting any other option.

I can understand that it is due to the index value[2] that I have used. I am not sure on how to identify if the user selects option 'C' or not Since it's index value may increase or decrease dynamically based on user selection.

Response array may look like:

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

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

Can someone help me to write typescript code?

Answer 1

Maybe there's a missing thing in your code. Since you told us that you use mat-option , I tried to create sample code using that.

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');
    }
  }
}

Take a look at the action on StackBlitz

Answer 2

I don't think value = {'d','c'} or value = {'c','b','a'} or value = {} is something legit JavaScript/TypeScript syntax for objects. Unless you were referring to something like {c: 'c'}

In that case it's an object and you need either Object.keys() or Object.values() to convert it to an array first.

 const value = { c: 'c', b: 'b', a: 'a' }; if(Object.values(value).includes('c')) { console.log('c'); } else { console.log('NO c'); }

Answer 3

Let's say user can select multiple options. You need to subscribe to selection change, or call a method from HTML whenever change happens. For example all selected values are stored in values variable. How are selected values stored in values depends on the way you detect change. After every selection change split that variable to an array like this:

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

Then check every array element:

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