Angular代码报错：绑定元素'value'隐式拥有'any'类型

错误原因 #

TS7031错误是因为你在解构onSelectionChanged的参数时，value没有明确的类型定义，TypeScript严格模式下会触发该报错。同时代码存在逻辑问题：禁用表单控件时调用disable未加括号，导致不会执行禁用操作；另外下拉选项绑定的是整个对象，但判断时直接拿对象和字符串比较，逻辑不会生效。

解决方案 #

1. 定义类型接口（可选但推荐） #

给下拉选项定义类型接口，避免使用any，提升代码类型安全性：

interface AnswerOption {
  value: string;
  viewValue: string;
}

2. 修正事件处理函数的类型与逻辑 #

导入MatSelectChange类型，给事件参数指定类型；同时修正控件禁用/启用的方法调用（加括号），并调整判断逻辑。

3. 优化下拉选项的value绑定（可选） #

如果希望下拉选项的value直接为字符串而非对象，可修改HTML中的绑定值，简化逻辑判断。

修正后的完整代码 #

方案一：下拉选项绑定整个对象 #

TS代码

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';

interface AnswerOption {
  value: string;
  viewValue: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Test';

  answers: AnswerOption[] = [
    { value: '0', viewValue: 'Yes' },
    { value: '1', viewValue: 'No' }
  ];

  customerdataForm = new FormGroup({
    answerControl: new FormControl("", Validators.required),
    sapNumberControl: new FormControl({ value: "", disabled: true }, [
      Validators.required
    ])
  });

  onSelectionChanged({ value }: MatSelectChange) {
    const sapControl = this.customerdataForm.get('sapNumberControl');
    if (value.value === '0') {
      sapControl?.disable();
    } else {
      sapControl?.enable();
    }
  }
}

HTML模板（无需修改）

<form [formGroup]="customerdataForm">
  <mat-form-field>
    <mat-label>Select an option</mat-label>
    <mat-select formControlName="answerControl" (selectionChange)="onSelectionChanged($event)">
      <mat-option *ngFor="let answer of answers" [value]="answer">
        {{answer.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <p>Customer SAP (only if they are an existing customer)</p>
  <mat-form-field>
    <input matInput placeholder="Customer_SAP" formControlName="sapNumberControl">
  </mat-form-field>
</form>

方案二：下拉选项绑定字符串value（更简洁） #

TS代码

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';

interface AnswerOption {
  value: string;
  viewValue: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Test';

  answers: AnswerOption[] = [
    { value: '0', viewValue: 'Yes' },
    { value: '1', viewValue: 'No' }
  ];

  customerdataForm = new FormGroup({
    answerControl: new FormControl("", Validators.required),
    sapNumberControl: new FormControl({ value: "", disabled: true }, [
      Validators.required
    ])
  });

  onSelectionChanged({ value }: MatSelectChange) {
    const sapControl = this.customerdataForm.get('sapNumberControl');
    if (value === '0') {
      sapControl?.disable();
    } else {
      sapControl?.enable();
    }
  }
}

HTML模板（修改value绑定）

<form [formGroup]="customerdataForm">
  <mat-form-field>
    <mat-label>Select an option</mat-label>
    <mat-select formControlName="answerControl" (selectionChange)="onSelectionChanged($event)">
      <mat-option *ngFor="let answer of answers" [value]="answer.value">
        {{answer.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <p>Customer SAP (only if they are an existing customer)</p>
  <mat-form-field>
    <input matInput placeholder="Customer_SAP" formControlName="sapNumberControl">
  </mat-form-field>
</form>

内容的提问来源于stack exchange，提问作者Linus _20