Не удалось реализовать Angular Custom Filter pipe - PullRequest
Новая
       1

Не удалось реализовать Angular Custom Filter pipe

1 голос
/ 08 июля 2020

Я создал пользовательский тип фильтра, чтобы отфильтровать список заметок в моем приложении, каждая заметка имеет «заголовок» и «сообщение».

Я не знаю, где я делаю не так, вот ошибок нет, но канал не работает.

Я пытался выяснить, что происходит не так, но безуспешно.

Кто-нибудь, пожалуйста, помогите мне с этим. Спасибо.

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

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

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

1 Ответ

1 голос
/ 08 июля 2020

[ngModel]="filterNote" - односторонняя привязка. он связывает значение filterNote с input, а не наоборот. вы можете изменить его на двустороннюю привязку, чтобы filterNote обновлялся при изменении значения input: [(ngModel)]="filterNote". Или используйте событие keyup: (keyup)="filterNote = $event.target.value".

...