以角度形式在更改事件之前将先前选定的值存储在选择框中

如何解决以角度形式在更改事件之前将先前选定的值存储在选择框中

我有针对不同属性的动态选择框，这些属性在表单中填充。在更改事件之前，我想从下拉列表中存储所选属性值的数组。 （属性 => 一个属性下有多个下拉值的数组）

<div *ngFor="let p of properties; let i = index">
    <ng-select placeholder="Select" (change)="onChange($event)">
            <ng-option *ngFor="let value of p.values" [value]="value">{{value.value}}</ng-option>
          </ng-select>
</div>

我尝试使用焦点来存储旧值，但它只提供当前选定的值。

任何帮助将不胜感激。

解决方法

编辑 - 正如 Eliseo 在评论中指出的，您可以使用 Pairwise 运算符来 make this even easier。

我这样做的方法是创建一个 FormGroup，迭代我的属性列表添加每个控件，然后订阅每个控件 ValueChanges observable。 ValueChanges 的优点在于该事件在值更新之前触发，因此您可以轻松访问当前值以及该值将是什么。

这是一个例子：

export class AppComponent {
  form: FormGroup = new FormGroup({});
  previousValues = {};

  properties: any[] = [
    {
      label: "Favorite Animal",values: ["cat","dog","bird","bunny"]
    },{
      label: "Favorite Vehicle",values: ["car","boat","motorcycle","hot air balloon"]
    },{
      label: "Favorite Element",values: ["earth","air","fire","water"]
    }
  ];

  ngOnInit() {
    this.properties.forEach(prop => {
      this.form.addControl(prop.label,new FormControl(""));
      this.previousValues[prop.label] = "";

      this.form.controls[prop.label].valueChanges.subscribe(evt => {
        this.previousValues[prop.label] = this.form.value[prop.label];
      });
    });
  }
}

和模板：

<form [formGroup]="form" *ngFor="let p of properties; let i = index">
    <label>{{i}}: </label>
    <select placeHolder="Select" [formControlName]="p.label">
    <option [value]="opt" *ngFor="let opt of p.values">
      {{opt}}
    </option>
  </select>
</form>

<div class="form-value">
    <label>Current Values:</label>
    {{form.value | json}}
</div>

<div class="form-value">
    <label>Previous Values:</label>
    {{previousValues | json}}
</div>

Here's a stackblitz that demonstrates.