Angular material2 与复杂对象列表的自动完成绑定的行为不正常

Question

与复杂对象的自动完成绑定无法正常运行。我想将自动完成绑定到复杂对象列表并将选定的复杂对象分配给另一个，但是当我这样做时，它会在自动完成中显示 [object object]。我还创建了 plunker 来说明问题

目前它仅适用于字符串的数组列表。而不是使用普通字符串列表的绑定列表将其与复杂对象的列表绑定。

我正在使用 Angular Material v2.0.0-beta.3 Plunker Link

Answer 1

它确实按照documentation 中的描述工作。关键是使用displayWith和(onSelect)来处理对象选择，如下。

HTML：

<md-input-container>
  <input type="text" mdInput [formControl]="searchControl" [mdAutocomplete]="usersComp"/>
</md-input-container>

<md-autocomplete #usersComp="mdAutocomplete" [displayWith]="getDisplayFn()">
  <md-option *ngFor="let user of filteredOptions | async" [value]="user" (onSelect)="selected(user)">
    {{user.displayName}}
  </md-option>
</md-autocomplete>

组件：

export class UserSelectComponent implements OnInit {
  @Input() value: any;
  @Output() valueChange = new EventEmitter();

  searchControl: FormControl = new FormControl();
  filteredOptions: BehaviorSubject<any[]> = new BehaviorSubject(undefined);

  constructor(private api: ApiService) {
    this.searchControl.valueChanges.subscribe(data => {
      if (typeof data === 'string' && data.trim() !== '') {
        this.filter(data);
      }
    });
  }

  ngOnInit() {
    this.searchControl.setValue(this.value ? this.value : '');
  }

  private filter(search: string) {
    this.api.get(`search/user/${search}`).subscribe(data => this.filteredOptions.next(data));
  }

  public getDisplayFn() {
     return (val) => this.display(val);
  }

  private display(user): string {
     //access component "this" here
     return user ? user.displayName : user;
  }

  public selected(user) {
    this.value = user;
    //send to parent or do whatever you want to do
    this.valueChange.emit(user);
  }
}