将角度/材质包更新到最新版本后，角度材质自动完成组件不显示项目

Question

Angular Material Autocomplete 组件在将 angular/material 包更新到最新版本后不显示项目

"@angular/material": "^2.0.0-beta.11" before it works fine for beta.10 version.

.html

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input placeholder="Pick one"  matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

.ts

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/**
 * @title Simple autocomplete
 */
@Component({
  selector: 'autocomplete-simple-example',
  templateUrl: 'autocomplete-simple-example.html',
  styleUrls: ['autocomplete-simple-example.css']
})
export class AutocompleteSimpleExample {

  myControl: FormControl = new FormControl();

  options = [
    'One',
    'Two',
    'Three'
   ];

}

Answer 1

您应该首先实现它，以便能够使用mat- 前缀。访问此链接了解更多信息。 https://github.com/angular/material-prefix-updater#after-running-the-tool

import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material';

@NgModule({
  providers: [
    {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true},
    // ...
  ],
})
export class MyModule { }

我使用 beta.11 测试了你的 sn-p，编译器在 mat-form-field、matAutoComplete、mat-autocomplete、mat-option 中抛出错误，只有 matInput 编译没有错误。下面的替代 sn-p 编译没有错误。

C1

<form class="example-form">
  <md-form-field class="example-full-width">
    <input placeholder="Pick one" matInput [formControl]="myControl" [mdAutocomplete]="auto">
    <md-autocomplete #auto="mdAutocomplete">
      <md-option *ngFor="let option of options" [value]="option">
        {{ option }}
      </md-option>
    </md-autocomplete>
  </md-form-field>
</form>

我使用MATERIAL_COMPATIBILITY_MODE 测试了您的 sn-p，它工作正常。如果您不想使用材质兼容模式，请尝试使用 sn -p C1。访问此链接以获取有关如何实现材料兼容模式以使用 mat- 前缀而不会出现错误的更多信息。 https://github.com/angular/material-prefix-updater#after-running-the-tool