angular pipe管道该如何绑定数据来进行筛选？

Question

我想通过pipe来控制*ngFor循环出在页面上的数据 但是我通过按钮控制传给pipe值 pipe没有反应 而通过input [(ngModel)]控制是可以的 各位大佬们我想通过按钮控制该怎么办啊

这是我的代码
html

<div>
  <!--pipe-->
  <div *ngFor="let one of arr | numberPipe:minprize:maxprize | biaoqianPipe:labelArr">
    <span>{{one.id}}</span>
    <span>{{one.prize}}</span>
    <span>{{one.biaoqian}}</span>
    <span>{{one.shoufa}}</span>
  </div>
</div>
<span>最小值</span>
<input type="text" [(ngModel)]="minprize">
<span>最大值</span>
<input type="text" [(ngModel)]="maxprize">
<p>标签选择</p>
<!--改变labelArr的按钮-->
<span *ngFor="let labels of label" class="biaoqian" [class.xuanbiaoqian]="labels.selted"     (click)="chooseLabels(labels)">{{labels.text}}</span>

ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pipe',
  templateUrl: './pipe.component.html',
  styleUrls: ['./pipe.component.css']
})
export class PipeComponent implements OnInit {
  minprize = 20
  maxprize = 50

  label = [
    {text:"水果",selted:false},
    {text:"衣服",selted:false},
    {text:"玩具",selted:false},
  ]
  labelArr = []
  arr = [
    {id:1,prize:20,biaoqian:"水果",shoufa:true},
    {id:2,prize:30,biaoqian:"水果",shoufa:false},
    {id:3,prize:40,biaoqian:"衣服",shoufa:true},
    {id:4,prize:50,biaoqian:"衣服",shoufa:false},
    {id:5,prize:60,biaoqian:"玩具",shoufa:true},
    {id:6,prize:70,biaoqian:"玩具",shoufa:false}
  ]

  constructor() { }

  ngOnInit() {
  }
  // 选标签
  chooseLabels(data){    //改变labelArr数组事件
    if (data.selted === false) {
      this.labelArr.push(data.text)
    } else {
      for (let i = 0; i < this.labelArr.length; i++) {
        if (this.labelArr[i] === data.text) {
          this.labelArr.splice(i, 1);
        }
      }
    }
    data.selted=!data.selted;
    console.log(this.labelArr)
  }
}

pipe.ts

// 导入模块
import {Pipe, PipeTransform} from "@angular/core";
// 管道名称
@Pipe({name: "biaoqianPipe"})
export class NiaoqianPipe implements PipeTransform {
  transform(value:any, labelArr:any) {  //我通过改变labelArr数组 无法执行到这里 只有第一次进入页面会执行到
    console.log(value)
    console.log(labelArr)
    if (labelArr.length === 0) {
      return value
    } else {
      console.log("发生改变")        
    }
  }
}

Answer 1

@Pipe({name: "biaoqianPipe",pure: false})使用非纯管道

Angular有两类管道：纯的与非纯的。 默认情况下，管道都是纯的
纯管道:
Angular只有在它检测到输入值发生了纯变更时才会执行纯管道。 纯变更是指对原始类型值(String、Number、Boolean、Symbol)的更改， 或者对对象引用(Date、Array、Function、Object)的更改。
Angular会忽略(复合)对象内部的更改。 如果我们更改了输入日期(Date)中的月份、往一个输入数组(Array)中添加新值或者更新了一个输入对象(Object)的属性，Angular都不会调用纯管道。

更多详情查看Angular-管道-纯管道与非纯管道