Question

通过向我的网站添加自动填充选择字段来实现目标。我希望自动填充选择字段填满我的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'
]

我希望该功能在我输入John Doe时返回Jenny Doehler 和 oe。

到目前为止我所做的是包括来自http://material.angular.io的角度材料2。我找到了那个enter link description here的示例，但是也没有解决它，因为我在管道等方面遇到了一些错误。我没有能够创建一个简单的自动完成选择字段，其中包含拉出的数据来自我的MongoDB。

希望有人可以帮助我！

因此，作为进一步的信息：这部分代码 - ＆gt;

this.availableFirmware = [];

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

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

Answer 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管道，因为filteredOptions是一个可观察的管道，而不是静态数组。

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

我不认为select很容易适应自动填充功能，所以如果您对角度材质感到满意，请坚持使用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;
    });
  }

}

Answer 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现在有两个名字。

角度材质2自动完成与角度5

2 个答案:

您的代码