Angular material2 Autocomplete 与复杂对象列表的绑定(bind)行为不正常

Question

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

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

我正在使用 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);
  }
}