onselect显示错误?角2+ [英] Wrong onselect display ? Angular 2+

问题描述

当我选择一个选项而不是显示名称时，它显示了ID.那是因为我绑定了[value] ="option.id".我正在向服务器发送ID，并希望显示名称.

When I select an option instead of showing me the name it shows me the id. That's because I bind [value] = "option.id". I'm sending an id to the server and want to show name.

          <mat-form-field class="example-full-width">
            <input
            matInput
            placeholder="Pretrazite proizvod koji zelite naruciti samo kucajte pocetna slova"
            formControlName="id"
            [matAutocomplete] = "auto"
            >
            <mat-autocomplete #auto="matAutocomplete" >
                  <mat-option *ngFor="let option of allProducts; let i = index"   [value]="option.id"   (onSelectionChange)="getPosts(i)">
                {{ option.name }}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>



  getProducts() {
    this.product.getAllProducts().subscribe((data: any) => {
     this.allProducts = data.products;
     console.log(data.products);
    });
  }

我也有(onSelectionChange)="getPosts(i)"函数

I also have (onSelectionChange) = "getPosts (i)" function

  getPosts(index){ 
    this.selectedProduct = index;
  }

我的问题是如何转发ID并在mat-autocomplete-mat-option选项中显示名称.我想这个onchange是我的功能，问题是我有动态字段看我的其他代码

My question is how do I forward the id and display the name in mat-autocomplete-mat-option options. I suppose this onchange is my function, the problem is that I have dynamic fields Looking my other code

  ngOnInit() {
    this.getProducts();
    this.form = this.fb.group({
      address: [null],
      phone: [null],
      city: [null],
      data: this.fb.array([this.createContact()])
    }); 
    this.contactList = this.form.get('data') as FormArray;
  }

  createContact(): FormGroup {
    return this.fb.group({
      id: [this.selectedProduct], 
      quantity: [null]
    });

如果您需要完整的代码，请问我，但是我不想让您太多代码.

In case you need the whole code, ask me, but I didn't want to overwhelm you with a lot of code.

推荐答案

您可以执行以下操作，它应该可以帮助您:

You can do something like this, it should help you:

<mat-autocomplete #auto="matAutocomplete" >
              <mat-option *ngFor="let option of allProducts; let i = index"   [value]="selectedProduct.name"   (onSelectionChange)="getPosts(option)">
            {{ option.name }}
          </mat-option>
        </mat-autocomplete>

这篇关于onselect显示错误?角2+的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！