我有一个包含多个元素的数组,每个数组中的值分别为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。