如何解决角度自动完成功能无法获取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中进行服务调用,这是在构造函数中执行此操作的错误做法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。