角材料-使用自动完成功能插入多个行

Question

我正在编写一个有角度的应用程序，该应用程序应该具有多行，并且每行上应该可以自动完成ID字段。

我能够执行的方法是使用相同的自动填充功能自动填充所有行

我需要在每一行中使用自动完成功能过滤值并自动从数据库数组中填充其他字段，图像中仅填充第二个字段，但出于测试目的，仅填充第二个字段。

---

// component.html

<div formArrayName='ArrayProdutos' *ngFor="let item of profileForm.get('ArrayProdutos').controls; let i = index">
 <div [formGroupName]="i">

   <mat-form-field class="w-100 mr-1"> 
    <input type="number" placeholder="Código" aria-label="number" matInput formControlName="codigo" [matAutocomplete]="autoCodigos"(keydown)="_filterByCodigo($event.target.value)" [(ngModel)]="selectedProd">
    <mat-autocomplete autoActiveFirstOption #autoCodigos="matAutocomplete" [displayWith]="displayFnProd">
    <mat-option *ngFor="let produto of filteredCodigos | async" [value]="produto" >
    {{produto.codigo}}
    </mat-option>
   </mat-autocomplete>
  </mat-form-field>

  <mat-form-field class="mr-1">
   <input type="text" placeholder="Tipo de Produto" aria-label="text" matInput formControlName="tipo" [matAutocomplete]="autoTipo" (keydown)="_filterTipo($event.target.value)" [ngModel]="elementoProd.tipo" > 
   <mat-autocomplete autoActiveFirstOption #autoTipo="matAutocomplete" >
    <mat-option *ngFor="let tipo of filteredTipos | async" [value]="tipo.tipo" >
    {{tipo.tipo}}
    </mat-option> 
   </mat-autocomplete>
  </mat-form-field>
 </div>
</div>

// component.ts

tipos: Produto[] = [];
  produtos: Produto[] = [];

 profileForm = this.fb.group({
    ArrayProdutos: this.fb.array([this.createElementData()]),
 });

createNew(codigo?, tipo?, descricao?, tamanho?, valor?) {
 const newRow = this.createElementData(codigo, tipo, descricao, tamanho, valor);
 this.ArrayProdutos.push(newRow);
}

get ArrayProdutos(): FormArray {
 return this.profileForm.get('ArrayProdutos') as FormArray;
}

createElementData(codigo?, tipo?, descricao?, tamanho?, valor?): 

FormGroup {
 if (valor) {
   return this.fb.group({
   codigo: codigo,
   tipo: [tipo],
   descricao: descricao,
   tamanho: [tamanho],
   valor:  valor
  });
 } else {
  return this.fb.group({
   codigo: [''],
   tipo: [''],
   descricao: '',
   tamanho: [''],
   valor: 0
  });
 }
}

ngOnInit() {
 this.http.get(`${environment.API}produtos/tipo`)
 .subscribe(
 (tipos: Produto[] ) => this.tipos = tipos);

 // Obtem os dados para filtro
 this.http.get(`${environment.API}produtos/busca`)
 .subscribe(
 (produtos: Produto[] ) => this.produtos = produtos );

 this.filteredTipos = this.profileForm.get('ArrayProdutos').valueChanges
  .pipe(
  startWith<string | Produto>(''),
  debounceTime(400),
  map(value => typeof value === 'string' ? value : value.tipo),
  map(name => name ? this._filterTipo(name) : this.tipos.slice())
 );


 this.filteredCodigos = this.profileForm.get('ArrayProdutos').valueChanges
  .pipe(
   startWith<string | Produto>(''),
   debounceTime(300),
   map(value => typeof value === 'string' ? value : value.codigo),
   map(codigo => codigo ? this._filterByCodigo(codigo) : this.produtos.slice())
 );

}