我可以通过子组件搜索过滤器吗？ （角度）

Question

我有一个父组件，我正在使用 *ngFor / @input 将数据向下传递给子组件。该子组件根据 pciData 数组中的对象数量创建 x 次

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>

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

Answer 1

在您的 *ngFor 循环中，您正在循环的数组正在通过管道传输。必须在循环开始之前处理管道。所以pciData 通过两个管道传递，然后生成的数组循环通过。这就是为什么system 在处理管道时不存在的原因。

我的建议是不要将管道用于搜索过滤器。相反，创建另一个 pciData 变量。你可以称它为filteredPciData。绑定到父组件中搜索框的 onChange 事件。当搜索值发生变化时，过滤pciData（应该包含所有值）并使用filteredPciData 存储结果。然后在您的 HTML 循环中通过 filteredPciData 而不是 pciData