Как создать ряды элементов mat-autocomplete в приложении Angular

Question

Я создаю приложение angular. В шаблоне у меня есть кнопка, при нажатии на нее добавляется новый элемент автозаполнения. Но проблема возникает, когда я выбираю параметр, я вижу, что другое автозаполнение показывает ранее отфильтрованное значение. Метод фильтрации и управление формой являются общими для всех элементов автозаполнения. Я пытаюсь понять, как сделать метод formelement и filter уникальным для каждого элемента автозаполнения.

Любая помощь или предложение будут очень признательны, спасибо.

Вот фрагмент кода ,

шаблон. html

<button (click)="addelement()"> Add New Elemnt </button>
  <ng-container *ngFor="let name of names; let j = index">
    <form class="example-form">
      <mat-form-field class="example-full-width">
        <mat-label>Assignee</mat-label>
        <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
          <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option.name}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
  </ng-container>

template.ts

import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

export interface User {
  name: string;
}

/**
 * @title Display value autocomplete
 */
@Component({
  selector: 'autocomplete-display-example',
  templateUrl: 'autocomplete-display-example.html',
  styleUrls: ['autocomplete-display-example.css'],
})
export class AutocompleteDisplayExample implements OnInit {
  myControl = new FormControl();
  options: User[] = [
    {name: 'Mary'},
    {name: 'Shelley'},
    {name: 'Igor'}
  ];

  names=[{}]

  filteredOptions: Observable<User[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => typeof value === 'string' ? value : value.name),
        map(name => name ? this._filter(name) : this.options.slice())
      );
  }

  displayFn(user: User): string {
    return user && user.name ? user.name : '';
  }

  private _filter(name: string): User[] {
    const filterValue = name.toLowerCase();

    return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
  }

  addelement() {
    this.names.push({});
  }
}

В фрагменте кода выше вы получите массив имен, на основе объекта, помещенного в этот массив, в шаблоне появится автозаполнение. Если вам нужна дополнительная информация, дайте мне знать.