如何使用* ngFor过滤Angular中未知数量的元素？

首先,您遍历外部帐户并为每个帐户创建一个专用的formControl并将它们存储在FormGroup中.作为ID参考,我使用了帐号.有了这个,我声明了一个名为getSearchCtrl(accountNumber)的函数来检索正确的formControl.

使用[formControlName] =“account.accountNumber”将模板与FormGroup中提供的formControl连接.

使用getSearchCtrl(account.accountNumber)将正确的formControl引用到过滤器管道并传递该值.

< div * ngFor =“let subAccount of account.subAccounts | filter：'accountNumber'：
getSearchCtrl(account.accountNumber).价值;让我=索引“>
<跨度> {{subAccount.accountNumber}}< /跨度>
< / DIV>

我还编辑了你的stackblitz app：https://stackblitz.com/edit/angular-reactive-filter-4trpka?file=app%2Fapp.component.html

我希望这个解决方案能帮到你.

import { Component,OnInit } from '@angular/core';
import { FormBuilder,FormGroup,FormControl } from '@angular/forms';
@Component({
  selector: 'my-app',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  searchForm: FormGroup;
  searchTerm = '';
  loaded = false;

  // Test Data. The real HTTP request returns one or more accounts.
  // Each account has one or more sub-accounts.
  accounts = [/* test data see stackblitz*/]

  public getSearchCtrl(accountNumber) {
    return this.searchForm.get(accountNumber)
  }

  constructor() {
    const group: any = {}
    this.accounts.forEach(a => {
      group[a.accountNumber] = new FormControl('')
    });
    this.searchForm = new FormGroup(group);
    this.loaded = true;
  }

  ngOnInit() {
    this.searchForm.valueChanges.subscribe(value => {
      console.log(value);
    });
  }
}

<ng-container *ngIf="loaded; else loading">

  <div [formGroup]="searchForm">
	  <div *ngFor="let account of accounts; let ind=index" class="act">
		  <label for="search">Find an account...</label>
		  <input id="search" [formControlName]="account.accountNumber" />
		  <div *ngFor="let subAccount of account.subAccounts | filter : 'accountNumber': getSearchCtrl(account.accountNumber).value; let i=index">
			  <span>{{subAccount.accountNumber}}</span>
		  </div>
	  </div>
  </div>
</ng-container>

<ng-template #loading>LOADING</ng-template>