Question

我正在从现有项目数组中设置属性的列表视图，这些项目的变量将在带有输入文本框的页面上显示。现在，我想用输入文本框内的值更新对象的变量。

更准确地说：我有一个称为Monitoring的对象，其中包含模式对象列表。这些模式对象具有变量，这些变量将在输入文本框的视图中列出，我们可以在其中更改值。如果输入框中的值已更改，我想用这些值更新相应的模式对象的变量。

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

您可以使用 [(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>

Answer 2

对matInput使用formControl或ngModel，如下所示： 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: ''
   });

将matInput的值绑定到其创建的数组

2 个答案: