[英]angular reset value for mat-slider within mat-table
I have a list of sliders rendered in a Mat table, and a final slider is displaying the total.我有一个在 Mat 表中呈现的滑块列表,最后一个滑块显示总数。 I need to reset the value to 0 if it is moved and the total is greater than 100. It works perfectly fine if I release the mouse within the slider element, but if I release the mouse little bit outside the element, value is not reset.如果移动并且总数大于 100,我需要将值重置为 0。如果我在滑块元素内释放鼠标,它工作得很好,但是如果我在元素外稍微释放鼠标,则不会重置值.
I need to access to the matSlider by reference or id to set the value in the mat-table.我需要通过引用或 id 访问 matSlider 来设置 mat-table 中的值。 but I couldn't find a way to achieve this.但我找不到实现这一目标的方法。
I have attached the code of whatever I have tried so far and also a link to stackblitz for the same.我已经附上了迄今为止我尝试过的任何代码,以及一个指向 stackblitz 的链接。 Can anyone help?任何人都可以帮忙吗? thanks.谢谢。
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
<td mat-footer-cell *matFooterCellDef>
total value slider
</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Slider </th>
<td mat-cell *matCellDef="let element">
<mat-slider (input)="element.value = $event.value" (onChange)="change(element)" (mouseup)="change(element)"
(pointerup)="change(element)" (slideend)="change(element)" [ngModelOptions]="{standalone: true}"
[max]="element.max" [(ngModel)]="element.value" [min]="element.min">
</mat-slider>
{{element.value}}
</td>
<td mat-footer-cell *matFooterCellDef>
<mat-slider [disabled]="true" #slider [max]="100" [min]="0" [value]="getTotal()"></mat-slider>
{{getTotal()}}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!-- Copyright 2019 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license -->
import {Component} from '@angular/core';
export interface PeriodicElement {
name: string;
id: number;
max: number;
min: number;
value : number;
}
const ELEMENT_DATA: PeriodicElement[] = [
{id:1,name:"test1",max:100,min:0,value:0},
{id:2,name:"test2",max:100,min:0,value:40},
{id:3,name:"test3",max:100,min:0,value:50},
];
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
displayedColumns: string[] = ['position', 'name'];
dataSource = ELEMENT_DATA;
change($event:any){
console.log($event.value);
if(this.getTotal() > 100){
console.log('total is greater than 100');
$event.value = 0
}
}
getTotal(){
return (this.dataSource.map(t => t.value).reduce((acc, value) => +acc + +value, 0));
}
}
/** Copyright 2019 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */
Try to remove mouseup
, pointerup
and slideend
handlers and just use (change)
instead so you're not dependent on where the mouse is released:尝试删除mouseup
、 pointerup
和slideend
处理程序,然后使用(change)
代替,这样您就不必依赖于释放鼠标的位置:
<mat-slider (input)="element.value = $event.value" (change)="change(element)"
[(ngModel)]="element.value" [ngModelOptions]="{standalone: true}"
[max]="element.max" [min]="element.min">
</mat-slider>
Here I'm passing element
to the change
function, so it has to be slightly modified:在这里,我将element
传递给change
函数,因此必须对其稍作修改:
change(element: any) {
console.log(element.value);
if(this.getTotal() > 100){
console.log('total is greater than 100');
element.value = 0
}
}
Here is a stackblitz这是一个堆栈闪电战
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.