angular 2 md-options 带有 md-autocomplete 的奇怪 UI 行为

Question

遵循https://material.angular.io/components/autocomplete的指南 我尝试在我的应用程序中实现自动完成功能，该功能需要从后端服务获取自动完成建议，所有逻辑工作正常。但我对 md-options 的一些奇怪的 UI 行为完全一无所知。而不是显示下面的选项输入字段，选项显示在页面底部。请参考屏幕截图。关于这背后的原因以及如何解决它的任何想法。

我的组件.ts：

private searchTerms = new Subject<string>();

// Push a search term into the observable stream.
search(term: string): void {
  this.searchTerms.next(term);
}

private userNameField: FormControl = new FormControl();

private filteredUsers: Observable<any[]>;

   ngOnInit() {

      this.userNameField.valueChanges
         .startWith(null)
         .forEach(term => {
             if(!this.utils.isEmptyString(term)) {
                this.search(term);
             }
        });

        this.filteredUsers = this.searchTerms
        .debounceTime(300)        // wait 300ms after each keystroke before considering the term
        .distinctUntilChanged()   // ignore if next search term is same as previous
        .switchMap(term => term   // switch to new observable each time the term changes
          // return the http search observable
          ? this.userService.searchUser(term)
          // or the observable of empty heroes if there was no search term
          : Observable.of<any[]>([]))
        .catch(error => {
          // TODO: add real error handling
          console.log(error);
          return Observable.of<any[]>([]);
        });

         this.filteredUsers.subscribe(
            function (x) {
                console.log('Next: ' + x.toString());
            },
            function (err) {
                console.log('Error: ' + err);
            },
            function () {
                console.log('Completed');
            });
   }

我的模板.html：

<form class="example-form">
    <md-form-field class="example-full-width">
      <input name="userName" type="text" placeholder="Search user by name, email or mobile"
             mdInput [formControl]="userNameField" [mdAutocomplete]="auto">
      <md-autocomplete #auto="mdAutocomplete">
        <md-option *ngFor="let user of filteredUsers | async" [value]="user.name">
          {{ user.name }}
        </md-option>
      </md-autocomplete>
    </md-form-field>

Answer 1

花了一些时间，终于知道我需要在我的 index.html 中添加材料样式表：

    <!-- angular material style sheet -->
<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">,

现在一切正常，:)