Неправильный выбор дисплея? Угловой 2+

Question

Когда я выбираю опцию вместо того, чтобы показывать мне имя, он показывает мне идентификатор. Это потому, что я связываю [value] = "option.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;
  }

Мой вопросКак переслать идентификатор и отобразить имя в опциях mat-autocomplete-mat-option. Я полагаю, что эта функция является моей функцией, проблема в том, что у меня есть динамические поля. Просмотр моего другого кода

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

Если вам нужен весь код, спросите меня, но я не хотел вас перегружатьмного кода.