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

Question

这里只是一个简单的问题。我还是有经验的新手，所以请。是的，我的视图页面看起来像这样。

最初，我正在用所有必需的数据加载页面。现在，这里的问题是，当用户单击“所有者” 中的任何名称时，数据应该能够基于“用户单击” 进行过滤。例如，如果用户单击“克里希纳” ，则所有与“克里希纳”相关联的广告系列都应被过滤并能够显示在同一页面上。

我的home.component.ts页面看起来像这样。

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;
    });

  }
  
}

我的home.component.html看起来像这样：

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

我尝试为按钮编写（click）=“ someMethod（campaign.Name）”，并传递了广告系列对象，并尝试在component.ts页面中应用过滤器，但是没有运气。任何帮助深表感谢。提前非常感谢。

P.S：这是经过一些研究并实施了以下建议之后。

我尝试实现自定义管道，但是在所有者单击事件之后，出现以下错误。

有关信息：单击事件后，管道的调试值如下所示。

我的烟斗看起来像这样。

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);
    });
  }
}

我的点击事件和html看起来像这样：

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>

Answer 1

实施自定义过滤器管道。 注意，根据需要修改自定义管道。

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

@Pipe({
    name: 'filter',
})
@Injectable()
export class Filter implements PipeTransform {
    transform(values: any[], key: string, value: string): any[] {
        if (!values) {
            return [];
        }
        if (!key|| !value) {
            return values;
        }

    return values.filter(val=>
        val[key].toLowerCase().includes(value.toLowerCase())
    );
}

}

import { Filter } from 'filterPipe';

@NgModule({
    imports: [],    
    declarations: [ Filter ],    
    providers: [ ],    
    exports: [
        Filter
    ],
})
export class PipeModule {}

//App module
import { NgModule } from '@angular/core';
import { PipeModule } from './modules/pipe.module';

@NgModule({
    imports: [PipeModule
    ],

declarations: [
],

providers: [
],

bootstrap: [AppComponent],
})
export class AppModule {}

主页HTML

   <tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : searchVal;">
    <td class="text-left">
        <span (click)="filterByOwnr(campaign.OWNERS)">{{campaign.OWNERS}}</span>
    </td>

filterByOwnr(val){
this.searchVal = val;
}

Answer 2

在您的自定义管道实施中，不应该这样：

return val.includes(values);

是这个吗？

return val.CampaignName.includes(value);