本文介绍了来自 API 的 Angular Material 自动完成的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
限时送ChatGPT账号..我尝试从 api 使用自动完成,但它不起作用.它只有在没有 api 的情况下才能工作.
这是我的组件 TS:在里面,有一个带有来自 api (onGetTaxList) 的数据的回调方法
import { Component, OnInit } from '@angular/core';从'../../../../core/services/users.service'导入{用户服务};从'@angular/forms'导入{FormControl};从 'rxjs' 导入 { Observable };import { map, startWith } from 'rxjs/operators';@成分({选择器:'app-create-process-modal',templateUrl: './create-process-modalponent.html',styleUrls: ['./create-process-modalponent.sass']})导出类 CreateProcessComponent 实现 OnInit {myControl = new FormControl();选项 = [{名称:'一个'},{名称:'两个'},{名称:'树'},];FilteredOptions: Observable;构造函数(私有服务:UsersService){}ngOnInit() {this.service.createNewProcess((data) => this.onGetTaxList(data));this.filteredOptions = this.myControl.valueChanges.管道(从...开始(''),地图(值=> this._filter(值)));}onGetTaxList(数据){控制台日志(数据);}私人_过滤器(值:字符串){const filterValue = value.toLowerCase();返回 this.options.filter(option => option.name.toLowerCase().includes(filterValue));}}
组件html:
<h2 style="text-align: right">新流程</h2><mat-form-field style="text-align: right"><input type="text" placeholder="开始打字..." matInput [formControl]="myControl" [matAutocomplete]="auto"><mat-autocomplete #auto="matAutocomplete"><mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">{{option.name}}</mat-option></mat-autocomplete></mat-form-field>
在这种状态下它与对象一起工作
options = [{名称:'一个'},{名称:'两个'},{名称:'树'},];
现在我希望它从数据 api 中工作:
0: {companyName: "ziro", cid: "524023240", Partners: Array(4)}1: {companyName: "plus", cid: "524023240", 合作伙伴: Array(2)}
我需要自动完成过滤公司名称.谢谢.
解决方案组件:
构造函数(私有服务:服务){this.filteredOptions = this.myControl.valueChanges.管道(从...开始(''),去抖动时间(400),distinctUntilChanged(),switchMap(val => {返回 this.filter(val || '')}));}//过滤并返回值filter(val: string): Observable{//调用发出 http 请求的服务返回 this.service.getData().管道(地图(响应 => 响应.过滤器(选项 => {返回 option.name.toLowerCase().indexOf(val.toLowerCase()) === 0})))}}
服务:
opts = [];获取数据(){返回 this.opts.length ?(this.opts) :this.http.get('https://jsonplaceholder.typicode/users').pipe(tap(data => this.opts = data))}
要查看完整演示,请查看此链接 Stackblitz
I try to use auto complete from api but it not work. its work only without api.
this is my Component TS: inside there, There is a callback method with the data from the api (onGetTaxList)
import { Component, OnInit } from '@angular/core';
import { UsersService } from '../../../../core/services/users.service';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
@Component({
selector: 'app-create-process-modal',
templateUrl: './create-process-modalponent.html',
styleUrls: ['./create-process-modalponent.sass']
})
export class CreateProcessComponent implements OnInit {
myControl = new FormControl();
options = [
{ name: 'One' },
{ name: 'Two' },
{ name: 'Tree' },
];
filteredOptions: Observable<any>;
constructor(private service: UsersService) { }
ngOnInit() {
this.service.createNewProcess((data) => this.onGetTaxList(data));
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
onGetTaxList(data) {
console.log(data);
}
private _filter(value: string) {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
}
}
Component html:
<div class="formContainer">
<h2 style="text-align: right">New Process</h2>
<mat-form-field style="text-align: right">
<input type="text" placeholder="Start Typing..." matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
In this state its work with the object
options = [
{ name: 'One' },
{ name: 'Two' },
{ name: 'Tree' },
];
and now i want its work from the data api:
0: {companyName: "ziro", cid: "524023240", partners: Array(4)}
1: {companyName: "plus", cid: "524023240", partners: Array(2)}
and i need the auto complete filter the companyName. Thanks.
解决方案Component:
constructor(private service: Service) {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
debounceTime(400),
distinctUntilChanged(),
switchMap(val => {
return this.filter(val || '')
})
);
}
// filter and return the values
filter(val: string): Observable<any[]> {
// call the service which makes the http-request
return this.service.getData()
.pipe(
map(response => response.filter(option => {
return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
}))
)
}
}
Service:
opts = [];
getData() {
return this.opts.length ?
of(this.opts) :
this.http.get<any>('https://jsonplaceholder.typicode/users').pipe(tap(data => this.opts = data))
}
For check full demo check this link Stackblitz
这篇关于来自 API 的 Angular Material 自动完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论