如何从 Angular mat-select 获取以前的和新的值？答案

【问题标题】：How to obtain previous and new value from Angular mat-select?如何从 Angular mat-select 获取以前的和新的值？
【发布时间】：2019-08-15 16:37:16
【问题描述】：

你好。我正在使用 angular 6 和 agular 材料，并且我有一个字符串数组，我在 mat-select 表单字段中显示它们。如果用户选择一个元素，然后选择另一个元素，我需要跟踪之前的值是什么，新的值是什么。

到目前为止，我已经能够使用 $event.value 获取当前值，但我还没有找到存储或获取先前值的方法。

   <mat-select  placeholder="Choose..." (selectionChange) ="checkTitle($event.value);">
            <mat-option *ngFor="let option of Titles; trackBy: trackByFn" [value]="option.title">
              {{option.title}}
            </mat-option>
    </mat-select>

到目前为止，我还没有想出如何解决这个问题的任何想法。感谢您的帮助。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

补充 Saif Jeb 的回答，如果您使用 formControl 或 FormGroup 来获取/放置值，则可以使用 formControl.valueChanges，即

  <mat-select [formControl]="control">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

  control=new FormControl()

  ngOnInit()
  {
    this.control.valueChanges.pipe(
      startWith(this.control.value),
      pairwise()
    ).subscribe(
      ([old,value])=>{
        console.log(old,value)
      }
    )
  }

第一次更改需要 startWith(this.control.value) 发出值

见stackblitz

【讨论】：

【解决方案2】：

您可以通过将值推送到主题中来处理先前值和当前值，并使用成对运算符观察此主题。此运算符将发出流的先前值和当前值。 (https://www.learnrxjs.io/operators/combination/pairwise.html)

示例：


export class YOU_COMPONENT{

  private data: Subject<any> = new Subject<any>();

  checkTitle(value){
    this.data.next(value);
  }

  observeDataChange():Observable<[]>{
     // this return an observable of an array that contains [previous, current] data
     return this.data.asObservable().pipe(pairwise());
  }

}

【讨论】：

这很有帮助。那么，如果我想重用组件，我必须为每个元素创建一个主题吗？或者我可以简单地使用相同的 checkTile() 函数吗？
不幸的是，您必须为每个元素创建一个主题，或者如果您想让您的组件可重用并提供此功能，您可以将其包装到自定义选择组件中。这个自定义的将包含他自己的主题来处理以前的和当前的值。它应该发出这些值。此时您将获得一个新的选择组件，您可以在任何地方使用它并始终发出两个值
是否可以为此提供工作示例。我是 Angular 的新手，我正在寻找这个解决方案。在此先感谢您的帮助 @SaifJerbi
这不会捕捉到第一个变化。仅从第二个开始。

【解决方案3】：

另一个简单的解决方法是使用来自mat-select 本身的openedChange 并保存当前值。 openedChange 将在 mat-select 打开时发出数据，其 event 是一个布尔值。

public onMatSelectOpen(form: AbstractControl): void {
  this.prevMatSelectValue = form.value.type;
}

public onMatSelectValueChanges(event): void {
  this.currentValue = event.value
}

<mat-form-field appearance="outline">
  <mat-label>label</mat-label>
  <mat-select 
    formControlName="item"
    (openedChange)="onMatSelectOpen(form)"
    (selectionChange)="onMatSelectValueChanges($event)"
  >
  <mat-option *ngFor="let item of items" [value]="item.id">
      {{ item.name }}
  </mat-option>
  </mat-select>
</mat-form-field>

要获取当前值，可以使用 mat-select 中的selectionChange。

【讨论】：

【解决方案4】：

MatList [selected] 有一个属性，它采用 true 或 false 中的布尔值。

所以在更新或选择一个值时。创建一个键值对，它将在选择集上设置为 true。

【讨论】：

【解决方案5】：

您可以只使用一个变量，将之前的值存储到该变量中：

prevVal: string;

checkTitle(newVal) {
  if (this.prevVal) {
    console.log(this.prevVal, newVal);
    // do stuff
  }
  // after processing, store the new val as the prev val
  this.prevVal = val;
}

【讨论】：

你会从哪里获取 oldValue ......这就是我们要解决的问题 :)