[英]Using Angular's matAutocomplete, how do I display an object's property, but reference the object itself elsewhere?
For example I have the markup:例如我有标记:
<input type="text" class="form-control" placeholder="Project #" name="project" [(ngModel)]="key" (ngModelChange)="filterProjects(key);" matInput [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="setProject($event.option.value)">
<mat-option *ngFor="let project of filtered" [value]="project.ProjNum">
{{project.ProjNum}}
</mat-option>
</mat-autocomplete>
<div class="input-group-append">
<button class="btn btn-info" (click)="load(selectedProject)">Load</button>
</div>
When an option is selected, it calls the setProject()
function, which sets the selectedProject used later for my Load button.当一个选项被选中时,它会调用
setProject()
函数,该函数设置稍后用于我的加载按钮的 selectedProject。 However, as it currently functions, binding the value to [value]="project.ProjNum"
will call setProject with the project number.但是,由于它当前的功能,将值绑定到
[value]="project.ProjNum"
将使用项目编号调用 setProject。 While it would seem intuitive to set my value to [value]="project"
(and this will set my selectedProject
to the project object), it will now show [object Object]
in my input field.虽然将我的值设置为
[value]="project"
看起来很直观(这会将我的selectedProject
设置为项目对象),但现在它会在我的输入字段中显示[object Object]
。
How do I modify this so I can directly reference the project
object outside of my options, and not just the selected and displayed property?我如何修改它以便我可以在我的选项之外直接引用
project
对象,而不仅仅是选择和显示的属性?
Note: I know I could just use the ProjNum to filter through my list of projects to find the correct one and then set my selectedProject
, but I would rather not waste resources cycling through a list when I already have the object I want.注意:我知道我可以只使用 ProjNum 过滤我的项目列表以找到正确的项目,然后设置我的
selectedProject
,但是当我已经拥有我想要的对象时,我宁愿不浪费资源在列表中循环。
You want to use the displayWith
function.您想使用
displayWith
函数。 It allows you to define a function that returns the value in which you want to be displayed它允许您定义一个函数,该函数返回您想要显示的值
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
export interface User {
name: string;
}
/**
* @title Display value autocomplete
*/
@Component({
selector: 'autocomplete-display-example',
templateUrl: 'autocomplete-display-example.html',
styleUrls: ['autocomplete-display-example.css'],
})
export class AutocompleteDisplayExample implements OnInit {
myControl = new FormControl();
options: User[] = [
{name: 'Mary'},
{name: 'Shelley'},
{name: 'Igor'}
];
filteredOptions: Observable<User[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => typeof value === 'string' ? value : value.name),
map(name => name ? this._filter(name) : this.options.slice())
);
}
displayFn(user?: User): string | undefined {
return user ? user.name : undefined;
}
private _filter(name: string): User[] {
const filterValue = name.toLowerCase();
return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.