使用Angular6自动完成显示id_product [英] autocomplete display id_product using Angular6

问题描述

在旁边发布我可以发布此结果["1"，"2"，"3"]，但是我还有另一个问题.

Next to this post I can post this result ["1", "2", "3"] but I have another problem.

当我选择产品时，在视图中显示ID 1、2和3，而不是产品名称.就像图片

When I select product, in view show id, 1, 2 and 3, not name of product. like in 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代码是这样的:

And my html code is Like this:

  <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?

Any idea please? How to display products_name ?

谢谢！

推荐答案

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

There was an issue with your Template and with your updateFormProducts method.

以下是修复程序:

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中传递状态"字段的索引，然后仅在可以使用(<FormArray>this.myform.get('products_id')).at(index)

In this method, you'll need to pass index of the State field in your FormArray and then call patchValue on only that field which you'll be able to get using (<FormArray>this.myform.get('products_id')).at(index)

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

Then in your template, you also need to fix a few things. Here's your updated template:

<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>

这是您的> 已更新的StackBlitz 参考

Here's an Updated StackBlitz for your ref.

对于您的问题，您可能需要这样做:

For your issue, you might want to do this:

在模板中创建一个getter:

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

在模板中，您可以使用productIdFormArray遍历FormArray:

And in the template, you can use productIdFormArray to iterate over through the FormArray:

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

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

You can find the changes in the Updated StackBlitz as well.

这篇关于使用Angular6自动完成显示id_product的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！