angular - 在 Typescript 中从动态字符串数组获取值

在 Angular Material 表单中，我有一个包含选项列表（例如 a、b、c、d、e）的 mat-option 字段。当用户选择/取消选择某一个特定选项（例如 c）时，我需要进行一些操作。但是，即使我只选择了选项 'c' 而没有选择其他任何选项，我也会收到未定义错误。

我可以理解这是由于我使用的索引值[2]。我不确定如何判断用户是否选择了选项 'C'，因为它的索引值可能会根据用户的选择动态增加或减少。

响应数组可能看起来像：

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

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

有人可以帮我写 TypeScript 代码吗？

答案＃1

也许你的代码中缺少了某些东西。既然你告诉我们你使用了 mat-option，我尝试用它创建了示例代码。

组件.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>

组件.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 上的操作

答案＃2

我认为 value={'d','c'} 或 value={'c','b','a'} 或 value={} 并不是合法的 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'); 
}