Angular 自动完成无法获取id值和显示对象属性
Angular Autocomplete can't get id value and display object properties
首先,我是 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")
}
}
您似乎没有订阅服务调用,因此您需要订阅,否则您将永远不会获得任何数据。像这样:
private _getDedicacionesData():void {
this.dedicaciones.getDedicaciones().subscribe(
returnValueFromService =>{
this.dedicacionesList = returnValueFromService.data
}
);
}
您可能想在开始实施 material 控件之前“证明”您可以获得数据。一点一点构建是个好习惯
您还应该在 ngoninit 中执行服务调用,因为在构造函数中执行此操作是不好的做法
首先,我是 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")
}
}
您似乎没有订阅服务调用,因此您需要订阅,否则您将永远不会获得任何数据。像这样:
private _getDedicacionesData():void {
this.dedicaciones.getDedicaciones().subscribe(
returnValueFromService =>{
this.dedicacionesList = returnValueFromService.data
}
);
}
您可能想在开始实施 material 控件之前“证明”您可以获得数据。一点一点构建是个好习惯
您还应该在 ngoninit 中执行服务调用,因为在构造函数中执行此操作是不好的做法