Question

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

代码是根据Material2自动填充网站：Autocomplete

不同之处在于[值]我想保存＆＃39;选项.Id＆＃39;而不是＆＃39;选项＆＃39;。

错误是当它记录选项时。它实际上并没有在输入字段中显示该值（将其留空）。

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

您可以使用options的{{1}}来displayWith根据绑定到md-autocomplete的{{1}}查找user.name来user.id进行过滤您需要使用md-option才能访问组件的数据。

bind(this)

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

处进行过滤

displayFn

参考 plunker demo 。

评论：在您的模板中，您使用的是displayFn(id: number): string { if (!id) return ''; let index = this.options.findIndex(option => option.id === id); return index === -1 ? '' : this.options[index].name; }，但在Id课程中User。我认为这也可能导致设置为空白，如果您更正此错误，id将被设置为user.id。

不显示Material2自动完成的值

3 个答案: