angular mat-table 中 mat-slider 的重置值

Question

我在 Mat table 中呈现了一个滑块列表，最后一个滑块显示总数。如果它被移动并且总数大于 100，我需要将值重置为 0。如果我在滑块元素内释放鼠标，它工作得很好，但如果我在元素外稍微释放鼠标，值不会重置.

我需要通过引用或 id 访问 matSlider 以设置 mat-table 中的值。但我找不到实现此目标的方法。

我已经附上了到目前为止我尝试过的所有代码，并且还附上了 link 到 stackblitz。谁能帮忙？谢谢。

    <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 */

Answer 1

尝试删除 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>

这里我把element传给了change函数，所以要稍微修改一下：

change(element: any) {
  console.log(element.value);
  if(this.getTotal() > 100){
    console.log('total is greater than 100');
    element.value = 0
  }
}

这是一个stackblitz

angular mat-table 中 mat-slider 的重置值

angular reset value for mat-slider within mat-table

angular-material

angular

mat-table

mat-slider