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测试了你的代码段，编译器在mat-form-field，matAutoComplete，mat-autocomplete，mat-option中抛出错误，只有matInput编译而没有错误。下面的替代片段编译没有错误。

<强> 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测试了您的代码段并且工作正常。如果您不想使用材料兼容模式，请尝试使用代码段 C1 。有关如何实现材料兼容性模式以使用mat-前缀而不出错的详细信息，请访问此链接。 https://github.com/angular/material-prefix-updater#after-running-the-tool

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

1 个答案: