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

Question

我需要创建一个搜索输入来过滤每个父帐户中的子帐户列表。目前，输入任何一个输入都会过滤所有帐户，而不仅仅是关联的帐户。

实例 (StackBlitz)
Basic (no FormArray)
With FormArray

要求

1. 帐户和子帐户的数量未知 (1...*)
2. 每个帐户都需要在 HTML 中有自己的搜索输入 (FormControl)
3. 输入 A 应该只过滤帐户 A 的列表。
   键入输入 B 应仅过滤帐户 B 的列表。

问题

1. 如何确保每个 FormControl 只过滤当前 *ngFor 上下文中的帐户？

2. 如何独立观察未知数量的 FormControl 的值变化？我知道我可以查看 FormArray，但我希望有更好的方法。

理想情况下，解决方案应该:

1. 使用响应式表单
2. 当值改变时发出一个 Observable
3. 允许从表单中动态添加/删除 FormControls

Answer 1

这是我解决您问题的方法。

首先，您遍历外部账户并为每个账户创建一个专用的 formControl并将它们存储在 FormGroup 中.作为 ID 引用，我使用了帐号。有了这个，我声明了一个名为 getSearchCtrl(accountNumber) 的函数。收回权利formControl .

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

引用正确的 formControl与 getSearchCtrl(account.accountNumber)给你的filter pipe并传递值。

<div *ngFor="let subAccount of account.subAccounts | filter : 'accountNumber': getSearchCtrl(account.accountNumber).value; let i=index"> <span>{{subAccount.accountNumber}}</span> </div>

我还编辑了您的 stackblitz 应用程序: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>