1

我正在从 Angular2 服务获取数据并尝试放入自动完成组件。当用户关注自动完成组件时，下拉菜单打开为空，但当用户输入内容时，下拉菜单会显示结果。

我想在自动完成集中显示所有数据，而不仅仅是在第一次输入之后。

我的模板是：

<md-input-container>
    <input mdInput [mdAutocomplete]="auto" [formControl]="myCtrl">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
    <md-option *ngFor="let item of filteredItems | async" [value] = "item.name">
        {{item.name}}
    </md-option>
</md-autocomplete>

我的组件是：

import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';

import {MyService} from '../services/my.service';

import {ItemInterface} from '../model/item-interface';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
 })
 export class TestComponent implements OnInit {

 myCtrl: FormControl;
 filteredItems: Observable<ItemInterface[]>;

 items: ItemInterface[] = [];
 errorMessage:any = '';

 constructor(private myService: MyService) {

   this.myCtrl = new FormControl();
   this.filteredItems = this.myCtrl.valueChanges
                                    .startWith(null)
                                    .map(i => i && i === 'object' ? i.name : i)
                                    .map(name => name ? this.filterItem(name) : this.items.slice());

  }

  ngOnInit() {
    this.myService.getItems()
                    .subscribe(
                      items => this.items = items,
                     error => this.errorMessage = error
                  );
 }


 filterItems(name: string) {
   return this.items.filter(option => new RegExp(`^${name}`, 
'gi').test(option.name));
 }
}
4

1 回答 1

1

我认为如果您将myCtrl代码移动到回调中，那应该可以解决问题。

我用这个plunker中的一些示例代码对其进行了测试，它正在工作。

ts：

constructor(private dataService: DataService) {
  this.myCtrl = new FormControl();
}

ngOnInit(){
  this.dataService.fetchData()
    .subscribe(
      (data) => {
        this.items = data.customers;
        this.filteredItems = this.myCtrl.valueChanges
          .startWith(null)
          .map(i => i && i === 'object' ? i.name : i)
          .map(name => name ? this.filterItem(name) : this.items.slice());

    }
);
于 2017-08-02T14:54:05.267 回答