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

Sit*_*hys 5 autocomplete mongodb angular-material angular

我正在通过向我的网站添加自动填充选择字段来实现目标.我想要一个自动填充选择字段填充我的mongoDB中的值.为了检索这些值我正在使用我的函数:

component.ts

this.availableFirmware = [];

this.terminalService.getFirmware().subscribe(firmware => {
  this.availableFirmware = firmware.firmware;
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

这项工作到目前为止,但我需要该字段是一个自动完成选择字段,搜索一切.所以,如果我的数组如下:

[
 'John Doe',
 'Christian Bale'
 'Jenny Doehler'
]
Run Code Online (Sandbox Code Playgroud)

我希望函数返回John Doe , Jenny Doehler当我打字时oe.

到目前为止我所做的是包括来自http://material.angular.io的角度材料2 .我发现的例子在那里此处输入链接的描述,但也并不能解决问题,因为我得到与管道等PP一些错误,我不能创建一个简单的自动完成选择场与从我的MongoDB拉数据. .

希望有人可以帮助我!


所以进一步的信息:这部分代码 - >

this.availableFirmware = [];

    this.terminalService.getFirmware().subscribe(firmware => {
      this.availableFirmware = firmware.firmware;
      console.log(this.availableFirmware);
    });
Run Code Online (Sandbox Code Playgroud)

产生这个输出: 在此输入图像描述我想在自动填充字段中显示名称.这也是我的过滤器功能无法工作的原因,因为this.availableFirmware是一个对象,我对如何拆分我自动完成所需的部分中的任何内容感到困惑.