3

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

代码根据 Material2 Autocomplete 站点：Autocomplete

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

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

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

我的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;
}
4

3 回答 3

0

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

我在Plunker有一个工作示例。

displayFn(userId: number) {
      return userId;
   }
于 2017-05-22T15:46:22.573 回答
0

尝试给自动完成一个模型（例如：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>的命令来帮助自己操作组件中的数据。

于 2017-05-19T13:20:42.550 回答
0

options您可以使用displayWithof进行过滤，根据绑定的内容md-autocomplete查找，这里您需要使用才能访问组件的数据。user.nameuser.idmd-optionbind(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 演示。

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

于 2017-05-29T06:02:24.103 回答