如何使用 Angular Material 将索引值与 ngModel 连接起来答案

【问题标题】：How to concatenate index value with ngModel using Angular Material如何使用 Angular Material 将索引值与 ngModel 连接起来
【发布时间】：2018-05-30 06:00:37
【问题描述】：

我正在使用带有角材料的动态表。表中的每一行都有一个选择下拉字段。默认情况下，与下拉字段相邻的按钮被禁用。当用户从下拉列表中选择任何选项时，按钮应自动变为可点击。

但是，我收到指向此代码 (ngModelChange)="'isDisabled'+i=$event" 的错误：

未捕获的错误：无法分配给引用或变量！

<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)="'isDisabled'+i=$event" placeholder="Select Job ID" [ngModel]="'isDisabled'+i" 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 Column -->
     <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]="'isDisabled'+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>

【问题讨论】：

isDisabled... 是如何声明的？是变量列表吗？

标签： angular angular-material

【解决方案1】：

您正在尝试将对象分配给字符串文字。 (ngModelChange)="'isDisabled'+i=$event" 例如，当 i 为 1 时，将适用于声明 'isDisabled1' = $event。

理想情况下，这个“禁用”属性将是每一行的表数据的一部分，您可以简单地绑定到该属性，例如[disabled]="element.disabled"。

由于您只是在从选择中选择任何值时尝试启用按钮，因此您实际上不需要任何模型来执行此操作。只需将模板引用分配给选择组件，然后使用它来检查值。

<mat-select #jobIDSelect (change)="onSelectJobId($event)" placeholder="Select Job ID" required>

...
<button *ngIf="!showArchivedBrand" mat-button [disabled]="jobIDSelect.value" ... >Manage Tabs</button>

您可能还需要一个用于 Job ID 选择的模型，我不确定，但也许您正在通过 (change)="onSelectJobId($event)" 处理这个问题。

【讨论】：