Angular Material中索引与ngModel拼接报错及按钮启用问题

错误原因分析 #

你碰到的Uncaught Error: Cannot assign to a reference or variable!其实是Angular模板的限制导致的——模板表达式里不允许像'isDisabled'+i=$event这样动态拼接变量名并赋值的操作，模板只能引用组件类里提前定义好的变量，没法动态创建或修改变量名称。

解决方案步骤 #

咱们换个思路，用一个数组来管理每一行按钮的禁用状态，就能精准对应到表格的每一行：

1. 在组件类中定义状态数组
   在你的组件.ts文件里添加一个数组，用来存储每一行按钮的禁用状态，初始全部设为true（毕竟默认按钮是禁用的）：

   // 组件类代码
   isDisabledArray: boolean[] = [];
   
   // 假设你在加载表格数据的方法里，初始化这个数组
   loadTableData() {
     // 这里替换成你获取表格数据的实际逻辑
     this.tableDataSource.subscribe(data => {
       this.tableElements = data;
       // 根据数据长度初始化禁用数组，所有元素默认设为true
       this.isDisabledArray = new Array(this.tableElements.length).fill(true);
     });
   }
   

2. 修改模板中的绑定逻辑
   把原来的动态变量拼接改成数组索引的方式，这样就能精准控制每一行的按钮状态：

   <!-- Job ID列的下拉选择部分 -->
   <ng-container matColumnDef="job-id">
     <mat-header-cell *matHeaderCellDef></mat-header-cell>
     <mat-cell *matCellDef="let element; let i = index">
       <mat-form-field class="job-id-field">
         <mat-select 
           (change)="onSelectJobId($event)" 
           (ngModelChange)="isDisabledArray[i] = false"  <!-- 这里改为数组赋值 -->
           placeholder="Select Job ID" 
           [ngModel]="element.selectedJobId"  <!-- 建议绑定到当前行元素的属性，更符合逻辑 -->
           required>
           <mat-option *ngFor="let job_id of element.job_id" [value]="job_id.job_id_id">
             {{ job_id.job_id_id }}
           </mat-option>
         </mat-select>
       </mat-form-field>
     </mat-cell>
   </ng-container>
   
   <!-- Manage Tabs列的按钮部分 -->
   <ng-container matColumnDef="manage-tabs">
     <mat-header-cell *matHeaderCellDef></mat-header-cell>
     <mat-cell *matCellDef="let element; let i = index">
       <button 
         *ngIf="!showArchivedBrand" 
         mat-button 
         [disabled]="isDisabledArray[i]"  <!-- 用数组索引判断当前行的禁用状态 -->
         [routerLink]="[element.id, 'manage-tabs']">
         Manage Tabs
       </button>
     </mat-cell>
   </ng-container>
   
   <!-- Brand Guidelines Column -->
   <ng-container matColumnDef="brand-guidelines">
     <mat-header-cell *matHeaderCellDef></mat-header-cell>
     <mat-cell *matCellDef="let element">
       <button *ngIf="!showArchivedBrand" mat-button [routerLink]="[element.id, 'guidelines']">Guidelines</button>
     </mat-cell>
   </ng-container>
   

额外优化提示 #

• 我把[ngModel]的绑定改成了element.selectedJobId，这样更合理——下拉框选中的值应该和当前行的元素绑定，而不是和禁用状态变量绑定，禁用状态只是控制按钮的辅助变量。
• 如果需要支持用户取消选择（比如清空下拉框）时重新禁用按钮，可以把ngModelChange的逻辑改成：(ngModelChange)="isDisabledArray[i] = !$event"，这样当没有选中值时，按钮会自动回到禁用状态。

内容的提问来源于stack exchange，提问作者Rahul Dagli