Могу ли я искать фильтр по дочернему компоненту? (Угловой) - PullRequest
Новая
       12

Могу ли я искать фильтр по дочернему компоненту? (Угловой)

0 голосов
/ 04 октября 2019

У меня есть родительский компонент, который я передаю данные дочернему компоненту с помощью * ngFor / @input. Этот дочерний компонент создается x раз в зависимости от того, сколько объектов содержится в массиве pciData

pciData - это массив из примерно 700 объектов данных, каждый со свойством / значением «имя хоста». при передаче в систему приложений имя узла этого объекта отображается на кнопке. Я хочу, чтобы конечный пользователь мог фильтровать эти кнопки по этому имени хоста, показывая только совпадающие компоненты системы приложения.

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

<ng-container *ngFor="let system of pciData | searchFilter: system.hostname | paginate: { itemsPerPage: 180, currentPage: p }; let i = index ">

, но «система» возвращается неопределенной. Однако, когда я просто набираю {{system.hostname}} в шаблоне под циклом, он выполняет цикл по каждому отдельному объекту и отображает имя хоста. Любая помощь будет оценена.

Вот родительский компонент. Я удалил имплиментацию, которую я пытался сделать с фильтром, чтобы избежать путаницы: 

import { Observable } from 'rxjs';
import { Ipcidata } from '../Shared/Ipcidata';
import { map, filter, switchMap } from 'rxjs/operators';
import { Ng2SearchPipeModule } from 'ng2-search-filter';




@Component({
  selector: 'app-system-status',
  templateUrl: './system-status.component.html',
  styleUrls: ['./system-status.component.css'],
})

export class SystemStatusComponent implements OnInit {


  @Input() pciData: any;



constructor() {}
  searchText;
  p: number;
  filteredValues : any;

  ngOnInit() {

  }
}

Вот родительский шаблон, «app-system» - это то, что я пытаюсь найти по значениям:


<ngx-spinner></ngx-spinner>

<section class="app-container">

  <div class ="card-container">
    <ng-container *ngFor="let system of pciData | paginate: { itemsPerPage: 180, 
      currentPage: p }; let i = index ">
      <div class='cardboi'>
        <app-system [systemInput]="system"></app-system>

      </div>
    </ng-container>  
  </div>
  <div class="pagination-container">
    <pagination-controls class='paginator' (pageChange)="p = $event"></pagination-controls> 
  </div>
</section>

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


  <button  (click)="openDialog()" [ngClass]="{
    'btn buttonGood':isValid(),
    'btn buttonDateAlert':isValid()=='datewarning',
    'btn buttonAlert':isValid()==false
  }">{{systemInput.hostname.slice(0,13) | uppercase}}</button>

</div>

Еще раз спасибо всем, кто может мне помочь с этим.

1 Ответ

2 голосов
/ 04 октября 2019

В вашем цикле * ngFor массив, который вы создаете, хотя и передается по конвейеру. Труба должна быть обработана до начала цикла. Таким образом, pciData передается по двум каналам, а затем результирующий массив проходит по петле. Вот почему system не существует во время обработки труб.

Я бы порекомендовал не использовать канал для поисковых фильтров. Вместо этого создайте другую переменную pciData. Вы можете назвать это что-то вроде filteredPciData. Привязать к событию onChange поля поиска в родительском компоненте. Когда значение поиска изменится, отфильтруйте pciData (который должен иметь все значения) и используйте filteredPciData для сохранения результатов. Затем в вашем HTML-цикле через filteredPciData вместо pciData

...