使用Angular6自动完成显示id_product

Question

在this 帖子旁边我可以发布这个结果 ["1", "2", "3"] 但我还有另一个问题。

当我选择产品时，在视图中显示 id、1、2 和 3，而不是产品名称。比如image

我改变函数updateForm()如下：

products: Products[] = []; 

 updateForm(ev: any, idd: any, componentid: any) {
    if (ev.isUserInput) {
      if (componentid === 'products_name') {
      this.prodId = idd;
      for (let i = 0; i < this.products.length; i++) {
      if (this.products[i].products_id=== idd) {
      console.log(this.products[i].products_name) //in this part I can see product name
    this.myForm.controls.products_id.setValue(this.products[i].products_name)
          }
        }
      } else {
        console.log('error');
      }
    }
  }

而我的html代码是这样的：

  <div class="row">
    <div class="input-field col s10">
      <div class="form-group">
        <div formArrayName="products_id">
          <div *ngFor="let p of myForm.get('products_id').value; let i = index">
            <input  formControlName="{{i}}" id="products_id" type="text"  aria-label="Number" matInput
              [matAutocomplete]="auto">
            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayWith">
              <mat-option (onSelectionChange)="updateForm($event, pro.products_id, 'products_name')" *ngFor="let pro of filteredProduct | async"
                [value]="pro.products_id">
                {{pro.products_name}} 
              </mat-option>
            </mat-autocomplete>
            <div class="button-left">
                <button *ngIf="myForm.controls.products_id.value.length > 1" type="button" class="fa" (click)="onRemoveItem(i)">-</button>
              </div>
          </div>

        </div>
      </div>
    </div>
    <div class="input-field col s2">
      <button type="button" class="btn" (click)="onAddItem()">+</button>
    </div>
  </div>

有什么想法吗？如何显示products_name？

谢谢！

Answer 1

您的模板和您的 updateFormProducts 方法存在问题。

以下是修复：

updateFormProducts(ev: any, idd: any, componentid: any, index) {
  console.log(ev.source.viewValue)
  console.log(componentid)
  if (ev.isUserInput) {
    if (componentid === 'products_id') {
      console.log(ev.source.viewValue);
      ( < FormArray > this.myform.get('products_id')).at(index).patchValue(ev.source.viewValue);
    } else {
      console.log('error');
    }
  }
}

在此方法中，您需要在 FormArray 中传递 State 字段的索引，然后仅在您可以使用 (<FormArray>this.myform.get('products_id')).at(index) 获取的字段上调用 ​​patchValue

然后在您的模板中，您还需要修复一些问题。这是您更新后的模板：

<form [formGroup]="myform" (ngSubmit)="onAddprod()" class="example-form">
  <div class="form-group">
    <div formArrayName="products_id">
      <div *ngFor="let s of myform.get('products_id').controls; let i = index">
        <mat-form-field class="example-full-width">
          <input [formControlName]="i" matInput placeholder="State" aria-label="State" [matAutocomplete]="auto">

          <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith">
            <mat-option *ngFor="let state of filteredStates | async" (onSelectionChange)="updateFormProducts($event, state.products_name, 'products_id', i)" [value]="state.products_id">
              <span>{{state.products_name}}</span>
            </mat-option>
          </mat-autocomplete>

        </mat-form-field>
      </div>
      <div class="input-field col s2">
        <button type="button" class="btn" (click)="onAddItem()">+</button>
      </div>
    </div>
  </div>

  <br>
  
  <div class="input-field col s2">
    <input formControlName="unit_price" id="unit_price" type="text">
  </div>
  <button type="submit" class="btn waves-effect waves-light">Register</button>
</form>

这里有一个Updated StackBlitz 供您参考。

更新

对于您的问题，您可能希望这样做：

在模板中创建getter:

get productIdFormArray () {
  return (<FormArray>this.myform.get('products_id')).controls;
}

并且在模板中，您可以使用productIdFormArray 来遍历FormArray：

...
<div *ngFor="let s of productIdFormArray; let i = index">
  <mat-form-field class="example-full-width">
...

您也可以在更新的 StackBlitz 中找到更改。