为什么打字稿将我的值设置为“未定义”字符串而不是未定义？

Question

我有一个选择下拉菜单，我将第一个值设置为未定义。

但问题是，如果我选择一个下拉值，然后选择第一个值（“全部”），那么我的绑定变量最终会变成一个字符串“未定义”，它实际上将它从一个数字更改为一个字符串。

memberParams.membership // is a :number and I don't want it to be converted to a string

并且 memberTypes 是一个名称/值对

export interface IMemberType {
   value: number;
   name: string;
}

为什么会这样，我该如何预防？

this.memberTypes = [{value: undefined, name: 'All'}, ...response.memberships];

<select class="form-control custom-select w-100" name="memberType" [(ngModel)]="memberParams.membership">
  <option *ngFor="let memberType of memberTypes" [value]="memberType.value">
    {{memberType.name}}
  </option>
</select>

Answer 1

HTML value 属性始终是数字或字符串。所以，没有办法在 Angular 模板中修复它。但是，在您的组件内部，您可以拥有可以正确更改值的 setter 和 getter。

在你的组件内部：

get membership() {
  return this.memberParams.membership;
}

set membership(value: string | number) { 
  this.memberParams.membership = val === "undefined"? undefined : value;
}

您只需在模板中做一点小改动，即将[(ngModel)] 绑定从memberParams.membership 更改为membership。