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

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

组件。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>

我希望在键入oe时，函数返回John Doe和Jenny Doehler

到目前为止，我所做的是包括来自的角材料2。我在那里找到了这个例子，但这也不能解决它，因为我在管道等方面遇到了一些错误。我无法使用从MongoDB中提取的数据创建一个简单的自动完成选择字段

希望有人能帮助我

---

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

this.availableFirmware = [];

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

---

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

这是我筛选列表的方式：

在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.filterietems

现在将同时具有这两个名称。

请查看您引用的页面示例

打开示例，那里的代码看起来几乎是您想要的，除了索引测试应该是

-1

，而不是

==0

ngOnInit（）{
this.filteredOptions=this.myControl.valueChanges
.烟斗(
startWith（“”），
映射（val=>this.filter（val））
);
}
筛选器（val:string）：字符串[]{
返回此.options.filter（选项=>
option.toLowerCase（）.indexOf（val.toLowerCase（））>-1）；
}

（不幸的是，提供的StackBlitz无法在线使用，但如果您想在本地使用它，可以将其导出）

你的代码 至于将示例与代码集成，请添加

async

管道，因为filteredOptions是一个可观察的管道，而不是静态数组

我假设选项列表在init时仅从MongoDB获取一次，因此您的代码如下所示

我不认为

select

很容易适应自动完成，因此如果您对角度材质没有问题，请使用角度材质StackBlitz示例中的模板

模板

{{firmware.name}

组件

@组件({
...
})
导出类MyComponent{
myControl:FormControl=newformcontrol（）；
可用固件=[]；
过滤装置：可观察；
selectedFirmware=null；
selectedName=''；
恩戈尼尼特（）{
this.terminalService.getFirmware（）.subscribe（固件=>{
this.availableFirmware=firmware.firmware；
}
this.filteredOptions=this.myControl.valueChanges
.烟斗(
startWith（“”），
映射（val=>this.filter（val））
);
}
过滤器（val:any）：any[]{
返回此.availableFirmware.filter（固件=>{
返回firmware.name.toLowerCase（）.indexOf（val.toLowerCase（））>-1；
});
}
}

向我们展示您使用Angular material autocomplete尝试了什么？我的问题是，

固件是一个对象。是的，可能有太多称为固件的东西在里面。处理对象应该很简单，我想您曾经引用过firmware.name，所以我想需要添加属性过滤方法和选项显示。如果这不好，请更明确地说明原因。我编辑了我的问题，希望它能帮助您理解我的问题所在。好的，我认为我以前的想法仍然成立。让我调整答案，我将对12月24日下载的StackBlitz代码进行测试。我已经更改了示例above使用
固件。name
，还将字符串类型更改为any，并将输入控件的模型设置为一个新的字符串属性。这一切都可以在我的测试床上运行，我希望我复制了对答案的所有更改-如果没有，我相信您可以看到模式。
private filterItems: any[] = [];
constructor(){}

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

<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;
    });
  }

}