角度自动完成功能无法获取ID值和显示对象属性

问题描述

首先，我是Angular的新手。我正在开发一个将AngularJS作为前端和Yii2作为后端的应用程序。到目前为止，一切都很好，但是在最近的几周里，我遇到了“角材料”的头痛。我进行了很多搜索，但找不到解决方法。

我正在尝试使用大约10个自动填充材料元素编写表单。可观察到，我的数据正在Angular Service中的API REST提取。在每个自动完成元素中，我可以轻松显示选项，但是当我尝试绑定/获取对象的ID时就会出现问题。当我期望至少有完整的对象时，displayWith会给我 id的值，因此我可以返回对象的名称和其他属性。我希望 [displayWith] 可以将整个对象还给我，以便我可以处理可以返回显示的属性。

我已经看到了如何使用对象数组或简单数组来执行此操作，但是我不知道如何使用Rest Api中的 observables 来执行此操作。另外，我不知道例如以某种形式管理如此多的可观察对象是否真的有效。

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

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

角度组件

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 "";
    }
  }
}

角度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>

角度服务

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")
          
  }

}

解决方法

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

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

您可能想“证明”您可以在开始实施材质控件之前获取数据。最好一点一点地构建

您还应该在ngoninit中进行服务调用，这是在构造函数中执行此操作的错误做法

angular angular-material angular2-observables autocomplete