用户单击后在 ngFor 中过滤：Angular 6

import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private campaignService : CampaignService ) { }


  Time;
  campaigns;
  

  ngOnInit(){

    setInterval(() => {  
      this.Time = Date.now()
    }, 1000);
   

    this.campaignService.CampaignsInfo()
    .subscribe(response=>{
      this.campaigns = response;
    });

  }
  
}

<campaign-header></campaign-header>

<div class="container-fluid date-time sticky-top">
<div class="container">
 <form class="form-inline my-2 my-lg-0 d-flex justify-content-center radio" >
     <div class="" >
		<input type="radio" checked name="day"> Today
		</div>
		&nbsp;&nbsp;
		 <div class="float-left">
		<input type="radio"  name="day"> Commulative
		</div>
     <!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>-->

    </form>
	<div class="d-flex justify-content-end" style="margin-top: -16px;"> 
   <span id="date_time"><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> {{Time | date}} &nbsp; <i class="zmdi zmdi-time zmdi-hc-fw"></i> {{ Time | date:'mediumTime' }} </span> 
</div>
</div>
</div>
<br>
<!-- content -->
<div class="container">
    
    <div class="row">
        <div class="col-sm-12">
           
            <div class="card campaign border-top wrap">	
				
			
                <div class="card-body table-responsive">
                    <table class="table table-hover mb-0">
				
                        <thead>
                            <tr>
                                <th class="border-top-0">CAMPAIGN </th>
                                <th class="border-top-0">STATUS</th>
                                <th class="border-top-0">DIALED</th>                               
                                <th class="border-top-0">OWNERS</th>
                                <th class="border-top-0"> <span class="invisible">Action</span></th>
                                <!-- <button  mat-button color="primary" routerLink="/campaign-details">CampaignDetails</button> -->
                            </tr>
                        </thead>
			
                        <tbody>
                             
                            <tr *ngFor="let campaign of campaigns?.result">
                                <td><p>{{campaign.CampaignName}}</p>
									<small>{{campaign.DepartmentName}}</small>
								</td>
                                <td>
                                    <small class="text-info">Active</small>
                                </td>
                                <td>
								 <p>{{campaign.Dialed}} / <small>1500000</small></p>
									<div class="progress mt-2 w-75">
                                        <div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
								</td>
                                
                                <td>
                                    <button class="badge badge-pill badge-secondary"  > {{ campaign.owners }} </button>
									</td>
                                <td class="ml-0 pl-0"><a routerLink="/campaign-details"><img src="../../assets/Images/next.png" class="next" /></a></td>
                            </tr>
                                
					   </tbody>
                    </table>
                </div>
            </div>
        </div>
</div>
<br>	
</div>	

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(values: any[], key: string, value: string): any[] {
    if (!values) {
        return [];
    }
    if (!value) {
        return values;
    }
    return values.filter(val =>{
      debugger;
      console.log(values);

      return val.includes(values);
    });
  }
}

filterByOwnr(val) {
  this.filter = val;

}

<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : filter;">

  <td>
    <button class="badge badge-pill badge-secondary" (click)="filterByOwnr(campaign.owner)"> {{ campaign.owner}} </button>
  </td>

</tr>