Как объединить значение индекса с ngModel, используя Angular Material

Question

Я использую динамический стол с угловым материалом.Каждая строка в таблице имеет выпадающее поле выбора.По умолчанию кнопка рядом с выпадающим полем отключена.Когда пользователь выбирает любую из опций в раскрывающемся меню, кнопка автоматически становится активной.

Однако появляется ошибка, указывающая на этот код (ngModelChange)="'isDisabled'+i=$event":

UncaughtОшибка: невозможно присвоить ссылку или переменную!

<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>

Answer 1

Вы пытаетесь присвоить объект строковому литералу.(ngModelChange)="'isDisabled'+i=$event" например, когда i равен 1, сработает оператор 'isDisabled1' = $event.

В идеале это свойство 'disabled' должно быть частью данных таблицы для каждой строки, и вы можете просто связать этонапример, [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>

Возможно, вам также понадобится модель для выбора идентификатора задания, я не уверен, но, возможно, вызаботимся об этом через (change)="onSelectJobId($event)".