angular - 带有对象代码和描述的角材料自动完成
问题描述
我正在尝试将 Angular Material Autocomplete 与类一起使用。我在滚动下拉列表中显示了描述,并希望在 formValue 中获取的实际值是代码。
出于某种原因,一切正常,自动完成将在滚动中显示所有描述,但是当我实际选择描述值时,代码会在文本框中呈现。它仍应显示描述,但将 Code 值存储在表单中。这在使用 mat-select 下拉菜单时工作正常,但是转移到自动完成会导致一些问题。
有谁熟悉如何解决这个问题?
打字稿:
readonly dataSource = DataSource;
dataSourceFilteredOptions: Observable<Array<BaseParentLookupVm>>;
private _filterDataSource(value: string): Array<BaseParentLookupVm> {
const filterValue = value?.toLowerCase() ?? '';
let data = this.dataSource.filter(option => option.description.toLowerCase().includes(filterValue));
return data;
}
createDataSourceFilteredOptions() {
this.dataSourceFilteredOptions = this.processBatchForm.get('dataSourceField').valueChanges
.pipe(
startWith(''),
map(value => this._filterDataSource(value))
);
}
public initializeNewBatchForm(): void {
this.processBatchForm = this.formBuilder.group({
'dataSourceField': [null, [Validators.required]],
});
}
HTML:
<mat-form-field>
<mat-label>Data Source</mat-label>
<input
type="text"
placeholder="Select"
matInput
formControlName="'dataSourceField'"
[matAutocomplete]="templateDataSource">
<mat-autocomplete
#templateDataSource="matAutocomplete"
>
<mat-option>Select</mat-option>
<mat-option
*ngFor="let dataSourceItem of dataSourceFilteredOptions | async"
[value]="dataSourceItem.code"
>
{{dataSourceItem.description}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
补充代码:
export interface BaseParentLookupVm {
displayOrderId?: number;
code: string;
description: string;
}
export const DataSource: Array<BaseParentLookupVm> = [
{
displayCode: '1',
code: '1111',
description: '1111 Description'
},
{
displayCode: '2',
code: '2222',
description: '2222 Description'
},
{
displayCode: '3',
description: '3333 Description'
},
{
displayCode: '4',
description: '4444 Description'
}
];
资源:
这个答案直接从价值映射到描述,所以他们的工作。 角度自动完成对象
尝试使用文本框更新 [DisplayWith],Angular mat-autocomplete:如何显示选项名称而不是输入中的值
这个答案没有显示如何使用文本框,给出了另一个问题How to display using [displayWith] in AutoComplete Material2
解决方案
要使用 displayWith,您必须将代码更改为:
<mat-form-field>
<mat-label>Data Source</mat-label>
<input
type="text"
placeholder="Select"
matInput
formControlName="'dataSourceField'"
[matAutocomplete]="templateDataSource">
<mat-autocomplete #templateDataSource="matAutocomplete" [displayWith]="displayFn">
<mat-option>Select</mat-option>
<mat-option
*ngFor="let dataSourceItem of dataSourceFilteredOptions | async"
[value]="dataSourceItem">
{{dataSourceItem.description}}
</mat-option>
</mat-autocomplete>
TS
myControl = new FormControl();
options = [{
displayOrderId: 1,
code: "1111",
description: "1111 Description"
},
{
displayOrderId: 2,
code: "2222",
description: "2222 Description"
},
{
displayOrderId: 3,
code: "3333",
description: "3333 Description"
},
{
displayOrderId: 4,
code: "4444",
description: "4444 Description"
}
];
filteredOptions: Observable < any > ;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(""),
map(value => this._filter(value))
);
}
private _filter(value: any) {
let filterValue = '';
if (typeof value === "string") {
filterValue = value.toLowerCase();
} else {
filterValue = value.description.toLowerCase();
}
return this.options.filter(
option => option.description.toLowerCase().indexOf(filterValue) === 0
);
}
displayFn(value: any) {
return value ? value.description : undefined;
}
推荐阅读
- ruby-on-rails - 使用 Rails 如何在给定时间段内查找用户预订的课程
- c# - 重构代码以不使用绝对路径或 URI
- html - 在节点 js 中,req.body 未定义
- clojure - Clojure 减少参数解构
- javascript - 如何使用基本的 javascript 代码平滑打开下拉菜单?
- three.js - 什么是推荐的方式,在三个 js 中,渲染(大部分)静态场景
- mysql - MySQL:如何制作拒绝未成年员工的触发器?
- python - Django过滤器内的条件
- python - 要在 Sagemaker 中使用的 tf.distribute.cluster_resolver.TPUClusterResolver(tpu_name) 的替代方案?
- android - Flutter 应用程序未在任何编辑器上运行