Material2 自动完成的值不显示

Question

我正在尝试让自动完成功能显示对象的一个​​参数但保存另一个参数，到目前为止它似乎没有表现。

代码根据 Material2 自动完成网站：Autocomplete

不同之处在于 [value] 我要保存 'option.Id' 而不是 'option'。

错误在于，虽然它记录了 option.Id，但实际上并没有在输入字段中显示值（将其留空）。

my-comp.html

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

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
   <md-option *ngFor="let option of filteredOptions | async" [value]="option.Id">
      {{ option.name }}
   </md-option>
</md-autocomplete>

my-comp.ts

class MyComp implements OnInit {
   myControl = new FormControl();
   options = [
     new User('Mary', 1),
     new User('Shelley', 2),
     new User('Igor', 3)
   ];
   filteredOptions: Observable<User[]>;

   ngOnInit() { 
      this.filteredOptions = this.myControl.valueChanges
         .startWith(null)
         .map(user => user && typeof user === 'object' ? user.name : user)
         .map(name => name ? this.filter(name) : this.options.slice());
   }

   filter(name: string): User[] {
      return this.options.filter(option => new RegExp(`^${name}`, 'gi').test(option.name)); 
   }

   displayFn(user: User): string {
      return user ? user.name : user;
   }
}

class User {
name: string;
id: number;

constructor(name: string, id: number)
this.name = name;
this.id = id;
}

Answer 1

尝试给自动完成一个模型（例如：myModel）：

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn" [(ngModel)]="myModel">
   <md-option *ngFor="let option of filteredOptions | async" [ngValue]="option.Id">
      {{ option.name }}
   </md-option>
</md-autocomplete>

这里，[ngValue] 为myModel 提供了option.Id 的值。

当您检索模型myModel 时，您将获得option.Id。

如果需要，您可以通过将(ngModelChange)="onChange($event)" 添加到您的<md-autocomplete> 来帮助自己，以便操作组件中的数据。

Answer 2

问题出在 displayFn 函数中，它期望 User 对象作为参数，但您传递的 user.id 是一个数字，并且由于不匹配，没有值被传递给视图。

我在Plunker 中有一个工作示例。

displayFn(userId: number) {
      return userId;
   }

Answer 3

您可以使用displayWith 的md-autocomplete 从options 过滤，根据绑定到md-option 的user.id 找到user.name，这里您需要使用bind(this) 才能访问数据的组件。

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn.bind(this)">

并在displayFn 函数处进行过滤

displayFn(id: number): string {
  if (!id) return '';
  let index = this.options.findIndex(option => option.id === id);

  return  index === -1 ? '' : this.options[index].name;
}

参考plunker demo。

评论：在您的模板中您使用的是Id，但在您的User 类中它是id。我认为这也可能导致设置空白，如果您更正此错字，user.id 将设置为md-input。