ionic4应用中的ngx管道自动更新orderBy

Question

我有一个包含多个元素的数组，每个数组中的值分别为strength，endurance和balance。然后，我有一个值调用diff，该值为0开始。

  element = [
    {
      id: 1,
      title: 'Test 1',
      endurance: 80,
      strength: 10,
      balance: 10,
      diff: 0
    },
    {
      id: 2,
      title: 'Test 2',
      endurance: 20,
      strength: 70,
      balance: 10,
      diff: 0
    },
    {
      id: 3,
      title: 'Test 3',
      endurance: 10,
      strength: 10,
      balance: 80,
      diff: 0
    }
  ];

然后我有一个具有3个属性的对象：耐力，力量和平衡。

user = {endurance: 0, strength: 0, balance: 0};

在我的.html页面上，我使用element显示*ngFor的每个元素，而我正在使用ngx pipe来基于diff值过滤元素。因此，由于所有diff的值都设置为0，因此我没有任何过滤过程。

然后，我有一个user输入，用户可以在其中将一些值设置为endurance，strength和balance。

然后，我有一个click按钮来执行一个函数，在此函数中，我为diff设置了一个新值，即diff = abs(user.endurance - endurance) + abs(user.strength - strength) + abs(user.balance - balance)，我将这个计算放在一个循环中，以diff的每个元素都有一个新的element值。

因此，当我单击按钮时，每个diff值都有一个新值，我希望根据此diff值对元素进行过滤，但是即使diff值已更新，没有什么改变我的元素的显示。

.ts

  onClick() {
    for (let i = 0; i < 3; i++) {
      this.element[i].diff = Math.abs(this.element[i].endurance - this.comp.endurance) +
      Math.abs(this.element[i].strength - this.comp.strength) + Math.abs(this.element[i].balance - this.comp.balance);
    }
    console.log(this.element);
  }

.html

<ion-content>
  <ion-item>
    <ion-label position="stacked"> Endurance
    </ion-label>
    <ion-input [(ngModel)]="user.endurance" type="number" >
    </ion-input>
  </ion-item>
  <ion-item>
      <ion-label position="stacked"> Force
      </ion-label>
      <ion-input [(ngModel)]="user.strength" type="number" >
      </ion-input>
    </ion-item>
    <ion-item>
        <ion-label position="stacked"> Equilibre
        </ion-label>
        <ion-input [(ngModel)]="user.balance" type="number" >
        </ion-input>
      </ion-item>
  <ion-item *ngFor="let ele of element | orderBy:'diff'">
    <ion-label>{{ele.title}}</ion-label>
    <p>{{ele.diff}}</p>
  </ion-item>
  <ion-button (click)="onClick()"> Compute</ion-button>
</ion-content>

例如，如果我将耐力设置为30，将力量设置为50，将平衡设置为20，我将获得这些结果。 ngx管道过滤器应允许我先显示test2，然后显示test1，最后显示test3。