Question

我的预期输出是，当用户基于该价格选择结束价格和结束价格时，我想在此处显示产品。我不希望通过使用防滑垫本身来按钮，我希望对产品进行排序。所以请帮我做这个。
HTML

    <mat-slider min="0" max="500" step="10" #statprice (input)="start($event)"></mat-slider>
    <mat-slider min="0" max="1000" step="10" #endprice (input)="end($event)"></mat-slider>
 <div> {{ statprice.value }} </div>
 <div> {{ endprice.value }}  </div>

Component.ts

 import { Component, OnInit, ViewChild, HostListener } from '@angular/core';
    import { ActivatedRoute, Router } from '@angular/router';
    import { Product, Category } from "../../app.models";
    import { HttpClientModule,HttpClient } from '@angular/common/http';
    @Component({
      selector: 'app-products',
      templateUrl: './products.component.html',
      styleUrls: ['./products.component.scss']
    })
    export class ProductsComponent implements OnInit {
      data1 = 0;
      data2 = 0;
      constructor(private activatedRoute: ActivatedRoute, 
        public appService:AppService, 
        private router: Router,
        private httpService: HttpClient) {}
       start(event: any) {
        this.data1 = event;
        console.log(this.data1 );
         }
         end(event: any) {
           this.data2 = event;
        console.log(this.data2 );
         }

      ngOnInit() {}      

    }

Answer 1

使用（更改）或（输入）事件。

master

如何使用angular6中的角材料过滤没有应用按钮的价格范围

1 个答案: