Angular 6 Mat Значение автозаполнения патча с удаленного сервера при обновлении объекта

Question

Я пытаюсь выполнить операцию обновления для моей сущности.У меня есть две автозаполнения мат в моей форме.Второй из них подписывается на Id первого автокомпилятора, и его значение изменяется соответственно.Так что, если я хочу сделать операцию создания над моей базой данных, все выглядит хорошо.Но когда я пытаюсь загрузить данные из удаленного API при обновлении и предварительно заполнить два автозаполнения данными из базы данных, они показывают только идентификаторы, которые были выбраны ранее.Они должны отображать значения, а не Id.Я знаю, что фильтр displayfn предоставляет эту функциональность, но только для операции создания.Установка функции времени ожидания для patchvalue формы иногда помогает, иногда нет (иногда я вижу значение, связанное с автозаполнением, но иногда нет).Я ищу правильный способ справиться с этой ситуацией.Любая помощь приветствуется.

Вот мой полный файл TS

firstItems: firstItemSelectInfo[] = [];
filteredFirstItems: Observable<any[]>;

secondItems: secondItemSelectInfo[] = [];
filteredSecondItems: Observable<any[]>;

@ViewChild("matFirstIdAutocomplete") matFirstIdAutocomplete: MatAutocomplete;
@ViewChild("matSecondIdAutocomplete ") matSecondIdAutocomplete: MatAutocomplete;

ngOnInit() {
    this.form = this.fb.group({
        firstItemId: [null, Validators.compose([Validators.required])],
        secondItemId: [null, Validators.compose([Validators.required])]
    });

    this.getFirstItems();   

    this.form.get('firstItemId').valueChanges.subscribe(val => {
        this.getSecondItems(val);
    });

    //entityId from url params
    this.idSubscription = this.route.params.subscribe(
        params => {
            let id = params['id'];
            if (id > 0)          
            this.getInfo(id);
        })
}

    //entityId from url params
    getInfo (entityId: number) {
        this.service.getInfo(entityId)
            .subscribe(
                res => {
                    this.patchValueOfForms(res);
                });
    );
}



private getFirstItems() {
    this.service.getFirstItems()
        .subscribe((res: any) => {
            this.firstItems = res;
            this.filteredFirstItems = this.form.get('firstItemId').valueChanges
                .pipe(
                    startWith(''),
                    map(item => item ? this.filterFirstItems(item) : this.firstItems.slice())
                );                  
        })
}

filterFirstItems (val: any) {
    if (typeof val === "number") {
        return val ? this. firstItems.filter(item =>
            item.firstItemId === val)
            : this. firstItems;
    } else {
        return val ? this. firstItems.filter(item =>
            item.name.toLowerCase().indexOf(val.toLowerCase()) === 0)
            : this. firstItems;
    }
}

private getSecondItems(firstItemId: number) {
          this.service.getSecondItemsByFirstItemId (firstItemId)
            .subscribe((res: any) => {
                this.secondItems = res;
                this.filteredSecondItems = this.form.get('secondItemId').valueChanges
                    .pipe(
                        startWith(''),
                        map(item => item ? this.filterSecondItems(item) : this.secondItems.slice())
                    );
            })
}

filterSecondItems (val: any) {
    if (typeof val === "number") {
        return val ? this.secondItems.filter(item =>
            item.secondItemId === val)
            : this.secondItems;
    } else {
        return val ? this.secondItems.filter(item =>
            item.name.toLowerCase().indexOf(val.toLowerCase()) === 0)
            : this.secondItems;
    }
}

patchValueOfForms (objectFromRemoteDb: SomeEntity): void {
    if (this.form)
        this.form.reset();

    this.form.patchValue({
        firstItemId: objectFromRemoteDb.firstItemId,
        secondItemId: objectFromRemoteDb.secondItemId
    });
}

displayFirstItem(item) {
    return this.matfirstItemIdAutocomplete.options.filter(x => x.value === item).map(x => x.viewValue)[0] ? this.matfirstItemIdAutocomplete.options.filter(x => x.value === item).map(x => x.viewValue)[0] : item;
}

displaySecondItem(item) {
    return this.matsecondItemIddAutocomplete.options.filter(x => x.value === item).map(x => x.viewValue)[0] ? this.matsecondItemIddAutocomplete.options.filter(x => x.value === item).map(x => x.viewValue)[0] : item;
}

Вот мой полный HTML

<div class="m-form__group">
     <mat-form-field class="example-full-width">
          <input matInput  [matAutocomplete]="matFirstIdAutocomplete"
                                        [formControl]="form.controls[firstItemId']">
              <mat-autocomplete #matFirstIdAutocomplete ="matAutocomplete" [displayWith]="displayFirstItem.bind(this)">
               <mat-option *ngFor="let item of filteredFirstItems | async" [value]="item. firstItemId'">
                  {{ item.name }}
                    </mat-option>
              </mat-autocomplete>
           </mat-form-field>                           
       </div>
 <div class="m-form__group">
       <mat-form-field class="example-full-width">
           <input matInput  [matAutocomplete]="matSecondIdAutocomplete"
                                        [formControl]="form.controls[secondItemId']">
               <mat-autocomplete #matSecondIdAutocomplete ="matAutocomplete" [displayWith]="displaySecondItem.bind(this)">
                <mat-option *ngFor="let item of filteredSecondItems | async" [value]="item.secondItemId">
                   {{ item.name }}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>                         
         </div>