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

【问题标题】：Get values from dynamic string array in Typescript从 Typescript 中的动态字符串数组中获取值
【发布时间】：2020-05-03 03:31:07
【问题描述】：

在角度材料形式中，我有一个带有 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');
 }

谁能帮我写打字稿代码？

【问题讨论】：

{'d','c'} 不是数组

标签： angular typescript angular-material

【解决方案1】：

我不认为 value = {'d','c'} or value = {'c','b','a'} or 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'); 
}

【讨论】：

【解决方案2】：

您的代码中可能缺少一些东西。由于您告诉我们您使用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>

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

【讨论】：

【解决方案3】：

假设用户可以选择多个选项。您需要订阅选择更改，或在更改发生时从HTML 调用方法。例如，所有选定的值都存储在values 变量中。 values 中存储的选定值的方式取决于您检测更改的方式。每次选择更改后，将该变量拆分为这样的数组：

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

然后检查每个数组元素：

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

【讨论】：