angular 2 md-options 怪异 UI md-autocomplete 行为

Question

following the guide from https://material.angular.io/components/autocomplete 我试图在我的应用程序中实现自动完成功能，它需要从后端服务获取自动完成建议，所有逻辑都在工作 fine.But 我完全不知道 md-[= 的一些奇怪 UI 行为22=] of showing the options below the input field,选项显示在页面底部。请参考屏幕 shot.Any 想法以了解其背后的原因以及解决方法。

我的component.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');
            });
   }

我的template.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

花了一些时间终于知道我需要添加 material 样式 sheet 到我的 index.html:

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

现在一切正常，:)

angular 2 md-options 怪异 UI md-autocomplete 行为

angular 2 md-options weird UI behavior with md-autocomplete

md-autocomplete

angular-material2

angular