mat自动完成显示在屏幕上

Question

嗨，我是有角度的初学者，我想显示自动完成文字视图 在ionic应用程序中，我按照下面的博客执行我的要求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);
  }
}

Answer 1

添加主题

必须包含主题才能将所有核心和主题样式应用于您的应用程序。

要开始使用预制主题，请在您的应用程序中全局包含Angular Material的预制主题之一。如果您使用的是Angular CLI，则可以将其添加到## Table of Contents 1. [introduction](#3) 2. [section one](#5) ：

styles.css

如果您不使用Angular CLI，则可以通过@import "~@angular/material/prebuilt-themes/indigo-pink.css"; 元素中的<link>元素来包含预建主题。