Question

我在Mat表格中显示了一个滑块列表，最后一个滑块显示了总数。如果将其移动并且总值大于100，则需要将值重置为0。如果在滑块元素内释放鼠标，则可以很好地工作，但是如果在元素外部释放鼠标一点，则不重置值。

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

我已经附加了到目前为止我尝试过的所有代码，并且还附加了指向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

垫台内垫滑块的角度复位值

1 个答案: