mat-autoComplete 中的占位符不起作用，如 Angular Material Documentation 中所示

Posted 2023-02-22

【中文标题】mat-autoComplete 中的占位符不起作用，如 Angular Material Documentation 中所示

【英文标题】：Placeholder in mat-autoComplete does not work as illustrated in the Angular Material Documentation

【发布时间】：2018-11-30 17:42:24

【问题描述】：

我正在使用角度材料文档中提供的完全相同的代码。根据角材料网站，角材料的示例 ma​​t-Autocomplete 控件的工作原理如下

Behaviour as per Angular Material Documentation

但是我的页面占位符停留在顶部并且不能以这种方式工作

Behaviour in my local

问题是应该出现在输入字段上的占位符没有出现，我总是看到输入字段上方的小占位符。即使我正在编辑输入字段，它也不会消失。

我挠了一阵子。是否可以向我提供有关我可能做错什么的提示

我在本地 html 中使用的代码

<form class="example-form">
        <mat-form-field class="example-full-width">
          <input type="text" placeholder="Plan" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
               option 
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>

我的打字稿文件中的代码

从'@angular/core'导入组件，OnInit，输入，OnChanges，SimpleChanges； 从'@angular/router'导入路由器； 从“@angular/forms”导入 FormControl, Form ； 从 'rxjs/Observable' 导入 Observable ； 从'rxjs/operators'导入地图； 从 'rxjs/operators/startWith' 导入 startWith ； @零件（ 选择器：'app-my-component', templateUrl: './app-my-component.component.html', styleUrls: ['./app-my-component.component.scss'] ) 导出类 MyComponent 实现 OnInit、OnChanges myControl: FormControl = new FormControl(); 选项= ['一'，'二'，'三']; 过滤选项：可观察的； 构造函数（私有路由器：路由器） 过滤器（验证：字符串）：字符串 [] 返回 this.options .filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0); ngOnInit() 尝试 //临时代码 this.filteredOptions = this.myControl.valueChanges.pipe( 从...开始（''）， 地图（val => this.filter（val）） ); // 临时代码结束 捕捉（异常） // ....

【问题讨论】：

你的 style.css 中添加了材质主题吗？

这张图片说明了当你有一个值时的实例。没有输入值的时候是怎么出现的？

文档似乎没有谈到这个例子。我不确定材料主题，但我确实包含了材料模块和自动完成/键入头部的东西工作正常，但不是这个占位符？？？

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; 将此添加到您的 style.css 中，看看它是否有效

问题是应该出现在输入字段上的占位符没有出现，我总是看到输入字段上方的小占位符（实际上是角材料放置的标签） .当我编辑输入字段时它也不会消失。

【参考方案1】：

<mat-autocomplete #auto1="matAutocomplete" [class]="'blue-bg'">
 <mat-option *ngFor="let option of simpleOptions" [value]="option">
   option 
 </mat-option>
</mat-autocomplete>

【参考方案2】：

我暂时采用了以下 SCSS 工作。这绝对不是对已发布问题的直接解决方案，但让我以可接受的行为解决它。

::ng-deep .mat-form-field-placeholder-wrapper 
    display: none !important;


input 
    &::-webkit-input-placeholder             
        font-size: 14px !important;
        color: #818181 !important;
    
    &::-moz-placeholder 
        /* Firefox 19+ */
        font-size: 14px !important;
        color: #818181 !important;
    
    &:-ms-input-placeholder 
        /* IE 10+ */
        font-size: 14px !important;
        color: #818181 !important;
    
    &:-moz-placeholder 
        /* Firefox 18- */            
        font-size: 14px !important;
        color: #818181 !important;
    

它的工作原理如以下屏幕截图所示 - work around