Angular 5中带有Angular Material 2自动完成功能

Question

Angular 5中带有Angular Material 2自动完成功能

mongodbangularautocompleteangular-material

4

我是一名有帮助的助手，可以为您进行文本翻译。

以下是需要翻译的内容：

我正在努力为我的网站添加自动完成选择字段。我想要一个自动完成选择字段，其中填充了来自我的MongoDB的值。为了检索这些值，我使用了我的函数：

component.ts

this.availableFirmware = [];

this.terminalService.getFirmware().subscribe(firmware => {
  this.availableFirmware = firmware.firmware;

component.html

<select class="form-control" id="sel2" [(ngModel)]="firmware" name="firmware">
    <option *ngFor="let firmware of availableFirmware" [value]="firmware._id">
        {{firmware.name}}
    </option>
</select>

这个目前可以正常工作，但我需要这个字段是一个自动完成的选择字段，可以搜索任何内容。所以，如果我的数组像这样：

[
 'John Doe',
 'Christian Bale'
 'Jenny Doehler'
]

我希望这个函数在我输入 oe 时返回 John Doe 和 Jenny Doehler。

我已经从http://material.angular.io导入了 Angular Material 2。我在那里找到了一个示例（链接），但它并不能解决我的问题，因为我会遇到一些管道等错误。我无法创建一个简单的自动完成选择字段，并从我的 MongoDB 获取数据。

希望有人可以帮助我！

所以作为更多信息：

this.availableFirmware = [];

    this.terminalService.getFirmware().subscribe(firmware => {
      this.availableFirmware = firmware.firmware;
      console.log(this.availableFirmware);
    });

产生了这个输出：，我想在我的自动完成字段中显示名称。这也是我的过滤函数不起作用的原因，因为this.availableFirmware是一个对象，我不知道如何将其拆分为我需要的部分以供自动完成使用。

- Sithys

你能展示一下你使用Angular Material自动完成组件所尝试的内容吗？ - AT82

2个回答

0

这是我筛选列表的方法：

在HTML中：

(input)="filterfirmware($event.target.value)

在组件中：

private filterItems: any[] = [];
constructor(){}

private(_name: any){
  this.filterItems = []
  this.filterItems = this.availableFirmware.filter((firmware: any) =>
       firmware.name.toLowerCase().indexOf(_name.toLowerCase()) === 0);
}

this.filterItems 现在将拥有两个名称。

- Swoox

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard Matsen · Accepted Answer

请查看您提到的页面中添加自定义过滤器的示例。

打开StackBlitz示例，那里的代码看起来几乎是您想要的，除了索引测试应该是> -1而不是=== 0。

ngOnInit() {
  this.filteredOptions = this.myControl.valueChanges
    .pipe(
      startWith(''),
      map(val => this.filter(val))
    );
}

filter(val: string): string[] {
  return this.options.filter(option =>
    option.toLowerCase().indexOf(val.toLowerCase()) > -1);
}

很遗憾，提供的 StackBlitz 在线上无法运行，但是您可以导出它并在本地进行尝试。

您的代码

关于将示例与您的代码集成，在 async 管道中添加，因为 filteredOptions 是一个可观察的管道，而不是静态数组。

我假设选项列表仅在初始化时从 MongoDB 中获取一次，因此您的代码将如下所示。

我认为 select 不易适应自动完成，因此如果您使用 Angular Material，则应使用 Angular Material StackBlitz 示例中的模板。

模板

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput
      [formControl]="myControl" [matAutocomplete]="auto" 
      [(ngModel)]="selectedName">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let firmware of filteredOptions | async" [value]="firmware.name">
        {{ firmware.name }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

component

@Component({
  ...
})
export class MyComponent {
  myControl: FormControl = new FormControl();
  availableFirmware = [];
  filteredOptions: Observable<any[]>;
  selectedFirmware = null;
  selectedName = '';

  ngOnInit() {
    this.terminalService.getFirmware().subscribe(firmware => {
      this.availableFirmware = firmware.firmware;
    }
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(val => this.filter(val))
      );
  }

  filter(val: any): any[] {
    return this.availableFirmware.filter(firmware => {
      return firmware.name.toLowerCase().indexOf(val.toLowerCase()) > -1;
    });
  }

}