javascript - 我可以通过子组件搜索过滤器吗？ ( Angular )

我有一个父组件，我正在使用* 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>

再次感谢任何可以帮助我的人。

最佳答案

在您的* ngFor循环中，虽然正在循环的数组正在通过管道传递。循环开始之前必须先处理管道。因此，将pciData通过两个管道进行管道传输，然后将结果数组循环通过。这就是为什么在处理管道时不存在system的原因。

我的建议是不要使用管道作为搜索过滤器。而是，创建另一个pciData变量。您可以将其命名为filteredPciData。绑定到父组件中搜索框的onChange事件。当搜索值更改时，过滤pciData（应具有所有值）并使用filteredPciData存储结果。然后在您的HTML循环中通过filteredPciData而不是pciData