Привязать значения matInput к массиву, из которого он создан

Question

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

Если быть более точным: у меня есть объект с именем monitor, у которого есть список объектов-шаблонов. Эти объекты шаблона имеют переменные, которые будут перечислены в представлении с полями ввода-текста, где мы можем изменить значения. Если значения в полях ввода изменены, я хочу обновить переменные соответствующих объектов шаблона этими значениями.

HTML выглядит так:

  <mat-card-content>
    <mat-list>
      <div *ngFor="let pattern of monitoring?.patterns" class="pattern-instance-item">
        <mat-list-item>
          <div class="pattern-name">
            Name: {{pattern.name}}
          </div>
          <mat-form-field *ngFor="let variable of pattern.variables" class="example-full-width">
            <input matInput [placeholder]="variable.key" [value]="variable.value">
          </mat-form-field>
          <button mat-button (click)="deletePatternInstance(pattern, variable)">
             <mat-icon>delete</mat-icon>
          </button>
          <button mat-button (click)="updateMonitoringArea(pattern, variable)">
            <mat-icon>update</mat-icon>
          </button>
        </mat-list-item>
        <mat-divider></mat-divider>
      </div>
    </mat-list>
  </mat-card-content>

У меня есть внутренний сервер на основе Spring, где объекты мониторинга должны иметь шаблоны со значениями переменных, указанными в веб-интерфейсе.

Answer 1

Используйте formControl или ngModel для matInput, как показано ниже: Html:

<mat-form-field *ngFor="let variable of pattern.variables" class="example-full-width">           
      <input matInput [placeholder]="variable.key" formControlName="variableName" 
      [value]="variable.value">        
  </mat-form-field>

Ts:

options: FormGroup;
   this.options = fb.group({
       variableName: ''
   });

Answer 2

Вы можете использовать [(ngModel)]="variable.value" для привязки значения тега input.
Не забудьте дать каждому тегу input уникальное имя, здесь я присваиваю значение индекса.

<mat-form-field *ngFor="let variable of pattern.variables; ;let index = index;" 
    class="example-full-width">
            <input name={{index}} [(ngModel)]="variable.value" matInput 
            [placeholder]="variable.key" [value]="variable.value">
    </mat-form-field>