3

在我的 Angular 应用程序中，我<select>绑定了如下的反应形式：

<form [formGroup]="myForm">
  <select formControlName="myControlName" id="my-select">
    <option [value]="value" *ngFor="let value of mySelectValues">{{ value }}</option>
  </select>
</form>

在这个阶段，mySelectValues是一个字符串数组。

我像这样进行组件 dom 测试：

it('the select should reflect the form value"', () => {

  // I somehow change the form value to 'ABC' here 
  // and I want to check if the select is correctly showing the change

  const select = fixture.nativeElement.querySelector('#my-select');
  expect(select.value).toEqual('ABC');
});

这工作正常。但是，在某些时候，在某些选择中，我需要在某些地方将对象作为值而不是纯字符串/数字。

所以我改变了我的 HTML 代码来[ngValue]代替[value]：

<option [ngValue]="value" ...

此时，在我的测试中，值select.value不再是，'ABC'而是变成类似于'2: ABC'where 2is the index of the selected option，然后是列 + 空格，然后是实际值。

到目前为止，我可以忍受这个，只需将我的测试更改为：

expect(select.value).toEqual('2: ABC');

它一直在工作。但是，在某些地方，我需要将对象用作值，因此mySelectValues不是纯字符串/数字数组，而是对象数组。

例如：

mySelectValues = [
  { name: 'Name 1', value: 'MyTestValue1' },
  { name: 'Name 2', value: 'MyTestValue2' },
];

所以像这样改变HTML：

<form [formGroup]="myForm">
  <select formControlName="myControlName" id="my-select">
    <option [ngValue]="object.value" *ngFor="let object of mySelectValues">{{ object.name }}</option>
  </select>
</form>

选择现在可以很好地处理对象。但是，我的测试不再有效，因为select.value现在总是返回值，例如'2: Object'因为选择了一个对象而不再是纯字符串。

我怎么解决这个问题？

换句话说：给定一个与绑定到对象一起<select>使用的 a，我怎样才能获得 的选定值（通过 DOM 访问它，就像在我的原始测试用例中一样）？<option>[ngValue]<select>

4

0 回答 0