Angular 自动完成无法获取id值和显示对象属性

Question

首先，我是 Angular 的新人。我正在开发一个集成 AngularJS 作为前端和 Yii2 作为后端的应用程序。到目前为止，一切都很好，但在过去的几周里，我遇到了 Angular Material 的头痛问题。我一直在寻找很多，但找不到解决方案。

我正在尝试编写一个包含大约 10 个 自动完成 material 元素的表单。我的数据由 API REST 在 Angular 服务中作为可观察对象获取。在每个自动完成元素中，我可以轻松地显示选项，但是当我尝试 bind/get 对象的 id 时，问题就来了。 DisplayWith 只是给了我 id 的 值，而我至少期待完整的对象，所以我可以 return 对象的名称和其他属性。我期望 [displayWith] 将整个对象还给我，这样我就可以处理 属性 我可以 return 显示的内容。

我已经看到如何使用对象数组或简单数组来执行此操作，但我不知道如何使用 Rest observables 来执行此操作 Api。还有，不知道是不是真的很高效，比如在一个表单中管理那么多的observable

我读过 this feature 但不太可能对我没有帮助。即使我找到了一些解决方案，我也没有找到 Observables 的解决方案。也许我面对的是整件事。在此先感谢，我真的很感激有人可以帮助我。

到目前为止，这只是我的一个自动完成元素的代码。

Angular分量

import { Component, OnInit } from '@angular/core';
import { FormBuilder,FormGroup, Validators, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, debounceTime, switchMap, map, distinctUntilChanged } from 'rxjs/operators';

import { DedicacionI } from '../../../models/dedicacion.interface'
import { DedicacionesService } from 'src/app/services/dedicaciones.service';

export class DocenteAltaComponent implements OnInit {
 
  myForm = new FormGroup()

  myControlDedicaciones = new FormControl();
  dedicacionesList: Observable<DedicacionI[]>;
  filteredOptionsDedicaciones: Observable<DedicacionI[]>;

  constructor (
    public fb:FormBuilder,

    private dedicaciones:DedicacionesService,
    ) 
    
    { 

      this._getDedicacionesData();

      this.filteredOptionsDedicaciones = this.myControlDedicaciones.valueChanges.pipe(
        startWith(null),
        debounceTime(200),
        distinctUntilChanged(),
        switchMap(val => {
          return this._filterDedicaciones(val || '')
        })
      )
    }
    
  private _getDedicacionesData():void {
    this.dedicacionesList = this.dedicaciones.getDedicaciones();
  }

  private _filterDedicaciones(val: string) {
    return this.dedicacionesList.pipe(
      map(response => response.filter(option => {
        let aux = option.denominacion.toString();
        return aux.toLowerCase().indexOf(val.toString().toLowerCase()) === 0
      }))
    )
  }

  public displayDedicacion (dedicacionSel): string {
    if (dedicacionSel != null){
      return dedicacionSel.denominacion + " (" + dedicacionSel.codigo + ")";
    }else{
      return "";
    }
  }
}  

Angular html

<form [formGroup]="myForm" (ngSubmit)="save(myForm.value)">

    <!-- Dedicaciones -->
    <p>
        <mat-form-field class="example-full-width">
        <input type="text"
            placeholder="Dedicación"
            aria-label="Number"
            matInput
            [formControl]="myControlDedicaciones"
            [matAutocomplete]="autoDededicacion">
            <mat-autocomplete autoActiveFirstOption #autoDededicacion="matAutocomplete" [displayWith]="displayDedicacion">
            <mat-option *ngFor="let option of filteredOptionsDedicaciones | async" [value]="option">
                <p>{{option.denominacion}} ({{option.codigo}}) </p>
                                
            </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </p>
    <!-- /.Dedicaciones -->

</form>

Angular 服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DedicacionI } from '../models/dedicacion.interface';

@Injectable()

export class DedicacionesService {

  constructor(private http:HttpClient) { }

  getDedicaciones() {

    return this.http.get<DedicacionI[]>("http://localhost/yii2-tests/rest/web/index.php/v1/dedicaciones")
          
  }

}

Answer 1

您似乎没有订阅服务调用，因此您需要订阅，否则您将永远不会获得任何数据。像这样：

    private _getDedicacionesData():void {
        this.dedicaciones.getDedicaciones().subscribe(
        
        returnValueFromService =>{        
            this.dedicacionesList = returnValueFromService.data
}
        );          
}

您可能想在开始实施 material 控件之前“证明”您可以获得数据。一点一点构建是个好习惯

您还应该在 ngoninit 中执行服务调用，因为在构造函数中执行此操作是不好的做法