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

Question

我有一个父组件，我正在使用 *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”返回时未定义。但是，当我只是在循环下的模板中输入 {{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。绑定(bind)父组件中搜索框的onChange事件。当搜索值发生变化时，过滤 pciData(应包含所有值)并使用 filteredPciData 存储结果。然后在 HTML 中循环通过 filteredPciData 而不是 pciData