Javascript 使用角度'；s matAutocomplete，如何显示对象'；属性，但在其他位置引用对象本身？

例如，我有以下标记：

<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>

{{project.ProjNum}}
负载

选择某个选项后，它将调用

setProject（）

函数，该函数将设置稍后用于“我的加载”按钮的selectedProject。但是，在当前运行时，将值绑定到

[value]=“project.ProjNum”

将使用项目编号调用setProject。虽然将我的值设置为

[value]=“project”

（这会将我的

selectedProject

设置为project对象）似乎很直观，但现在它会在我的输入字段中显示

[object object]

如何修改该属性，以便在选项之外直接引用

项目

对象，而不仅仅是选定和显示的属性

---

注意：我知道我可以使用ProjNum筛选我的项目列表以找到正确的项目，然后设置我的

selectedProject

，但我不希望在我已经拥有所需对象的情况下浪费资源在列表中循环。

您想使用

displayWith

功能吗。它允许您定义一个函数，返回要显示的值

从：

{{option.name}
从“@angular/core”导入{Component，OnInit}；
从'@angular/forms'导入{FormControl}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{map，startWith}；
导出接口用户{
名称：字符串；
}
/**
*@title显示值自动完成
*/
@组成部分({
选择器：“自动完成显示示例”，
templateUrl:'autocomplete display example.html'，
样式URL:['autocomplete-display-example.css']，
})
导出类AutoCompletedDisplayExample在NIT上实现{
myControl=newformcontrol（）；
选项：用户[]=[
{姓名：'玛丽'}，
{name:'Shelley'}，
{name:'Igor'}
];
过滤装置：可观察；
恩戈尼尼特（）{
this.filteredOptions=this.myControl.valueChanges
.烟斗(
startWith（“”），
映射（值=>typeof值=='string'？值：value.name），
映射（name=>name？this.\u过滤器（name）：this.options.slice（）
);
}
displayFn（用户？：用户）：字符串|未定义{
返回用户？user.name：未定义；
}
私有过滤器（名称：字符串）：用户[]{
常量filterValue=name.toLowerCase（）；
返回this.options.filter（option=>option.name.toLowerCase（）.indexOf（filterValue）==0）；
}
}

如果angular2+支持使用as绑定值，那就太好了。例如，我可以绑定

[value]=“project as project.ProjNum”

这一定是一个周五，我看了大约30分钟的matAutocomplete文档，仍然没有看到这一点。非常感谢。

<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);
  }
}