Как связаться между компонентом NgModel и трубой угловой

Question

Я создал компонент, объединяющий поле ввода для выполнения поиска, но когда я хочу, чтобы он связывался с каналом поиска, последний не отвечает, тогда как когда я интегрирую непосредственно ввод поля в теле, последний связывается с полем поиска. pipe.

компонент поиска сообщений html :

  <input type="text" [(ngModel)]="searchedTerm">  

компонент поиска сообщений ts :

 import { Component, Input } from '@angular/core';

  @Component({
    selector: 'search-message',
    templateUrl: 'search-message.component.html'
  })
  export class SearchMessageComponent   {
  @Input() messageSearch: string;
 }

компонент приложения html :

   <search-message [messageSearch]="searchTerm"></search-message>
    <div class="card" *ngFor="let item of list | search: searchedTerm">
      <span [innerHTML]="item.name"></span>
    </div>

компонент приложения ts ::

   import { Component } from '@angular/core';

   @Component({
     selector: 'my-app',
     templateUrl: './app.component.html',
     styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
    searchTerm: string;
    list = [
     { 'id': 1, 'name': 'apple'},
     { 'id': 1, 'name': 'pineapple'},
     { 'id': 1, 'name': 'jackfruit'},
     { 'id': 1, 'name': 'somefruit'},
 ];
  }

конвейер поискового фильтра :

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

     import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
     @Pipe({
       name: 'search'
     })
   export class SearchPipe implements PipeTransform {

 constructor(private _sanitizer: DomSanitizer) {}

 transform(list: any[], searchText: string): any[] {
   if (!list) { return []; }
   if (!searchText) { return list; }

    searchText = searchText.toLowerCase();
    let response = list.filter( item => {
      return item.name.toLowerCase().includes(searchText);
   });


     return response;
  }
  }

https://stackblitz.com/edit/angular-searchpipe-gnqtgv

каким было бы решение?

Answer 1

Вы можете избежать использования канала для фильтрации (и , вероятно, следует избегать его по соображениям производительности ) массива данных. Вместо этого вы можете подойти к нему следующим образом. Создайте новое свойство в вашем компоненте, которое представляет собой отфильтрованный список данных. Отфильтрованные результаты будут сохранены в этом свойстве, чтобы избежать изменения исходного списка:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  searchTerm: string;
  list = [
    { id: 1, name: "apple" },
    { id: 1, name: "pineapple" },
    { id: 1, name: "jackfruit" },
    { id: 1, name: "somefruit" }
  ];
  filteredList = [];

  ngOnInit() {
    this.filteredList = this.list;
  }

  handleChange($event: string) {
    this.filteredList = this.list.filter(e => e.name.toLowerCase().includes($event));
  }
}

<search-message (searchChanged)="handleChange($event)"></search-message>
<div class="card" *ngFor="let item of filteredList">
    <span [innerHTML]="item.name"></span>
</div>

В вашем поисковом компоненте вы можете использовать Вывод (один подход), чтобы выдать строку поиска при изменении/ input:

import { Component, Input, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "search-message",
  templateUrl: "search-message.component.html"
})
export class SearchMessageComponent {
  searchedTerm: "";
  @Input() messageSearch: string;
  @Output() searchChanged = new EventEmitter<String>();

  handleChange() {
    this.searchChanged.emit(this.searchedTerm);
  }
}

<input type="text" [(ngModel)]="searchedTerm" (input)="handleChange()">

Вот пример в действии.

Я бы рекомендовал просмотреть документацию / примеры по Взаимодействие компонентов какон отлично показывает разные подходы к обмену данными между компонентами через ввод / вывод или, более предпочтительно, через общие службы.

Надеюсь, это поможет!

Answer 2

Вы можете заставить его работать так:

// search.component.html
 import { Component, Input } from '@angular/core';

  @Component({
    selector: 'search-message',
    templateUrl: 'search-message.component.html'
  })
  export class SearchMessageComponent   {
  @Input() messageSearch: string;
  searchedTerm: string; // <--- add this!
 }

// app.component.html
<search-message #search [messageSearch]="searchTerm"></search-message>
    <div class="card" *ngFor="let item of list | search: search.searchedTerm">
      <span [innerHTML]="item.name"></span>
    </div>

Реальная проблема была в том, что searchedTerm не было видно, таким образом, вы могли бы ее решить.