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

Posted 2023-02-18

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

【英文标题】：Angular Material Autocomplete component is not displaying the items after updating angular/material package to latest version

【发布时间】：2018-03-08 17:51:15

【问题描述】：

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'
   ];

【问题讨论】：

也许某些特定于您的设置？它在这里工作plnkr.co/edit/vEyj1uy52oyldcF4SVMU?p=preview

显示您的AppModule。

@WillHowell 自动完成功能正常。错误是由于“ngx-perfect-scrollbar”最新版本造成的。如果我删除“ngx-perfect-scrollbar”它工作正常。

@Edric 自动完成功能正常。错误是由于“ngx-perfect-scrollbar”最新版本造成的。如果我删除“ngx-perfect-scrollbar”它工作正常。

【参考方案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

【讨论】：

自动完成功能正常。错误是由于“ngx-perfect-scrollbar”最新版本造成的。如果我删除“ngx-perfect-scrollbar”它工作正常