Question

我正在尝试在代码库中使用过滤器管道。我有一个容器，我看到了一个项目列表，但我的问题是容器有嵌套组件加载项目。这是容器的HTML：

baord-container.component.html

 <div class="myTeamsWrapper">
  <form id ="filter">
    <label>Filter seasons by name:</label>
           <input type="text" value = "yyy" [(ngModel)] = "term" [ngModelOptions]="{standalone:true}" placeholder="Search by Season name!"/>
  </form>
  <tbody>
  <tr *ngFor="let season of myseasons | gdfFilter: term" >
    <gdf-board-nav-list-items [season]="season"></gdf-board-nav-list-items>
  </tr>
  </tbody>
</div>

现在你可以在上面的代码中看到我们有gdf-board-nav-list-items ..这个组件的HTML看起来像这样：

GDF-板-NAV一览items.html

<div class="container" *ngIf="loggedIn" (click)="myTeam()">
    <div class="leftIcon">
   </div>
    <div class="textContent">
      <!--Katy Tigers<span class="year">2017-2018</span>-->
   {{boardName}}
    </div>
    <div class="rightIcon">
      <div class="uw-icon-arrow-right-small arrowIcon"></div>
    </div>
  </div>

上述文件的typeScript：

GDF-板-NAV一览items.ts

@Component({
  selector: 'gdf-board-nav-list-items',
  templateUrl: './gdf-board-nav-list-items.component.html',
  styleUrls: ['./gdf-board-nav-list-items.component.scss']
})
export class GdfBoardNavListItemsComponent implements OnInit {

  public loggedIn;

 // term: string = 't';

  @Input() season;
  boardName;


  constructor(public frLocalUserService: FrLocalUserService, private router: Router, private frApi: FRApiService) { }

  ngOnInit() {
    console.log('gdfBoardNavList season =' + this.season);
    this.frApi.getBoard(this.season, 0).subscribe(b => {
      this.boardName = b.name;
    });
    this.frLocalUserService.loggedIn.subscribe((state) => {
      this.loggedIn = state;
    });
  }

这就是我们如何获得在ngOnInit（）列表中显示的电路板名称，现在我的gdfFilter当前正在搜索上传到gdf-board-nav-list-items.ts的boardID但它无法搜索到董事会名称。如何修改我的代码，以便当我使用电路板名称搜索时，我只能获得选定的结果。

这是我的gdffilter.ts

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

@Pipe({
  name: 'gdfFilter'
})
export class GDFFilterPipe implements PipeTransform {

  transform(values: any, term?: any): any {
    // Check if the search term is undefined or fi nothing is entererd in the search box.
    if (!term ) {return values; }
     // return updated search array.
     return values.filter(function(x){
      // lowers the case of the search term and then return the matching vslues.
      //  alert(x);
       console.log(values);
      // return x.name.toLowerCase().includes(term.toLowerCase());
       return x.name;
    });
  }  
}

提前致谢。

过滤管道在嵌套组件中不起作用

0 个答案: