无法实施 Angular 自定义过滤器管道

Question

我创建了一个自定义过滤器类型，用于过滤我应用程序中的笔记列表，每个笔记都有一个 'title' 和 'message'。

我不知道哪里做错了，没有错误，但是管道不工作。

我试图找出问题所在，但没有成功。

谁能帮我解决这个问题。谢谢。

search.pipe.ts

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  transform(value:Note[], sName:string): any[] {
    if(!value){
      return null;
    }
    if(!sName){
      return value;
    }
      let relevantNotes=value.filter(note=>{
        if(note.message.toLowerCase().includes(sName) || note.title.toLowerCase().includes(sName)){
          return true;
        }
        return false;
      })
    return relevantNotes;
    }
}

笔记-list.component.ts

export class NotesListComponent implements OnInit {

  notes:Note[]=new Array<Note>();
  filterNote:string;

  constructor(private noteService:NotesService) { }

  ngOnInit(){
    this.notes=this.noteService.getAll();
  }

  delete(id:number){
    this.noteService.delete(id);
  }

笔记-list.component.html

<div class="main-container">
    <div class="search-bar-container">
        <div class="field">
            <p class="control has-icons-left">
              <input class="input" type="text"  placeholder="Filter" [ngModel]="filterNote"> <!--(keyup)="filter($event.target.value)"-->
              <span class="icon is-small is-left">
                <i class="fas fa-search"></i>
              </span>
            </p>
          </div>
    </div>
    <div class="notes-list">
        <app-note-card *ngFor="let note of notes | search:filterNote;index as i"
        [link]="i"
        (delete)="delete(i)"
        [title]="note.title"
        [message]="note.message"> <!--filteredNotes-->
      </app-note-card>
    </div>
    <button class="button floating-add-button is-primary" routerLink="new">Add</button>
</div>

Answer 1

[ngModel]="filterNote" 是一种单向绑定。它将 filterNote 值绑定到 input，反之亦然。您可以将其更改为双向绑定，以便在更改 input 值时更新 filterNote：[(ngModel)]="filterNote"。或者利用 keyup 事件：(keyup)="filterNote = $event.target.value".

无法实施 Angular 自定义过滤器管道

Failed in implementing Angular Custom Filter pipe

angular

typescript

angular-pipe