错误的onselect显示？角 2+

Question

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

          <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)" 功能

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

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

  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]
    });

如果您需要完整的代码，请询问我，但我不想用大量代码压倒您。

Answer 1

你可以这样做，它应该可以帮助你：

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