更新实体上来自远程服务器的Angular 6 Mat自动完成补丁值

Question

我正在尝试对实体执行更新操作。我的表格中有两个席位自动填充功能。他们中的第二个正在第一个自动补全的ID上订阅，并且其值相应更改。因此，如果要对数据库执行创建操作，一切似乎都很好。但是，当我尝试在更新操作中从远程api加载数据并用db中的数据预填充两个自动完成时，它们只会显示以前选择的ID。它们应显示值而不是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>