Angular Material 2 使用 Angular 5 自动完成答案

【问题标题】：Angular Material 2 Autocomplete with Angular 5Angular Material 2 使用 Angular 5 自动完成
【发布时间】：2017-12-27 18:27:35
【问题描述】：

我正在为我的站点添加一个自动完成选择字段而苦苦挣扎。我想用我的 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 的角材料 2。我在那里找到了示例enter link description here，但这也没有解决它，因为我在管道等方面遇到了一些错误。pp。我无法使用从我的 MongoDB 中提取的数据创建一个简单的自动完成选择字段。

希望有人可以帮助我！

作为进一步的信息：这部分代码->

this.availableFirmware = [];

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

产生这个输出：，我想在我的自动完成字段中显示名称。这也是我的过滤器功能不起作用的原因，因为 this.availableFirmware 是一个对象，我对如何拆分自动完成所需的部分中的任何内容感到困惑。

【问题讨论】：

向我们展示您使用 Angular 材料自动完成的尝试？

标签： mongodb angular autocomplete angular-material

【解决方案1】：

查看您引用的页面的Adding a Custom Filter 示例。

打开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 管道，因为 filtersOptions 是可观察管道，而不是静态数组。

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

我不认为select 很容易适应自动完成功能，所以如果您对 Angular 材质没问题，请坚持使用 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({
  ...
})
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;
    });
  }

}

【讨论】：

我的问题是，firmware 是一个对象
是的，里面可能有太多叫做固件的东西。处理一个对象应该是微不足道的，我认为您在某一时刻引用了 firmware.name，所以我想该属性需要添加到过滤器方法和选项显示中。如果这不好，请更明确地说明原因。
我编辑了我的问题，希望它能帮助你理解我的问题在哪里。
好吧，我认为我之前的想法仍然成立。让我调整一下答案，我将在 12 月 24 日下载的 StackBlitz 代码上运行测试。
我已将上面的示例更改为使用firmware.name，还将字符串类型更改为any，并将输入控件的模型设置为新的字符串属性。这一切都适用于我的测试平台，我希望我将所有更改复制到答案 - 如果不是，我相信你可以看到模式。

【解决方案2】：

这就是我过滤列表的方式：

在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 现在将拥有两个名称。

【讨论】：