如何在 Angular 中为过滤器管道使用按钮值答案

【问题标题】：How to use button value for filter pipes in Angular如何在 Angular 中为过滤器管道使用按钮值
【发布时间】：2020-06-14 02:54:27
【问题描述】：

我正在开发一个博客站点，该站点有一个菜单，我需要能够从用户选择的博客类型中过滤我的博客。我目前正在尝试使用过滤器管道，当用户从子菜单中选择一种流派时，博客列表会根据流派进行过滤。

我之前使用过带有文本输入字段的过滤器管道，它可以工作，但这次我需要它根据用户选择的按钮值进行过滤，但我无法让它工作。

我正在尝试将过滤器的 searchTerm 的值设置为单击按钮时需要过滤的类型，如下所示：

<mat-toolbar>
  <ul [(ngModel)]="searchWord">
    <li>
      <button mat-button (click)="searchWord = 'Business and Economy'">Business and Economy</button>
    </li>
    <li>
      <button mat-button (click)="searchWord = 'Law and Social Justice'">Law and Social Justice</button>
    </li>
    <li>
      <button mat-button (click)="searchWord = 'Global Health'">Global Health</button>
    </li>
    <li>
      <button mat-button (click)="searchWord = 'Foreign Affairs'">Foreign Affairs</button>
    </li>
  </ul>
</mat-toolbar>

<mat-divider></mat-divider>

<ng-container class="ng-container" *ngIf="blogs.length > 0">
  <h2>Featured Blogs</h2>
  <div class="blog-card-div" *ngFor="let blog of blogs | blogFilter:searchWord">
      <mat-card class="mat-elevation-z8" id="card-div" >

这是我的过滤管道代码：

import { PipeTransform, Pipe } from '@angular/core';
import { Blog } from '../blog.model';

@Pipe({
  name: 'blogFilter'
})
export class BlogFilterPipe implements PipeTransform {
  // first arg might need to be the string of songs
  transform(blogs: Blog[], searchTerm: any): Blog[] {
    if (!blogs || !searchTerm) {
      return blogs;
    }
    // filters applied to the song array
    return blogs.filter(blog =>
       (blog.genre.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1));
  }
}

目前我的过滤器不起作用，是我做错了什么还是您不能根据按钮选择进行过滤？

【问题讨论】：

标签： angular typescript filter pipe

【解决方案1】：

我不明白需要双向绑定到ngModel 指令。不用它试试

<mat-toolbar>
  <ul>           <!-- no use for `ngModel` here -->
    <li>
      <button mat-button (click)="searchWord = 'Business and Economy'">Business and Economy</button>
    </li>
    <li>
      <button mat-button (click)="searchWord = 'Law and Social Justice'">Law and Social Justice</button>
    </li>
    <li>
      <button mat-button (click)="searchWord = 'Global Health'">Global Health</button>
    </li>
    <li>
      <button mat-button (click)="searchWord = 'Foreign Affairs'">Foreign Affairs</button>
    </li>
  </ul>
</mat-toolbar>

【讨论】：

谢谢您，删除它使其响应！
不客气 :)。如果您接受答案，那就太好了。