matAutocomplete 显示在屏幕上答案

【问题标题】：matAutocomplete display over the screenmatAutocomplete 显示在屏幕上
【发布时间】：2019-03-20 22:43:16
【问题描述】：

嗨，我是 Angular 的初学者，我想显示材料自动完成文本视图在离子应用程序中，我按照下面的博客来满足我的要求https://material.angular.io/components/autocomplete/overview 但是当我运行我的代码时，它会显示在屏幕上，如下图所示，但我想在输入字段的下方显示，就像它们在博客中的显示方式一样有人可以建议请给我

home.css

page-home {
  .example-form {
    min-width: 150px;
    max-width: 500px;
    width: 100%;
  }

  .example-full-width {
    width: 100%;
  }
}

home.html

<ion-content padding>
  <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">
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of options" [value]="option.name">
          {{ option.name }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </form>
</ion-content>

home.ts:

export class HomePage implements OnInit {
  myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three'];
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option => 
      option.toLowerCase().indexOf(filterValue) === 0);
  }
}

【问题讨论】：

您是否包含主题？ material.angular.io/guide/…
如何在离子应用程序中做到这一点你能建议我吗？

标签： angular ionic3

【解决方案1】：

包括一个主题

需要包含主题才能将所有核心和主题样式应用到您的应用程序。

要开始使用预构建主题，请在您的应用程序中全局包含 Angular Material 的预构建主题之一。如果您使用的是 Angular CLI，您可以将其添加到您的 styles.css：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

如果您不使用 Angular CLI，您可以通过 <link> 元素在您的 index.html 中包含一个预构建的主题。

【讨论】：