Question

我使用的是角材文档中提供的相同代码。根据Angular Material网站上的示例， mat-Autocomplete 控件的工作原理如下

Behaviour as per Angular Material Documentation

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

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

我m了一段时间。能为我提供一些可能做错什么的提示吗

我在本地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>

我的打字稿文件中的代码


    import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
    import { Router } from '@angular/router';
    import { FormControl, Form } from '@angular/forms';
    import { Observable } from 'rxjs/Observable';
    import { map } from 'rxjs/operators';
    import { startWith } from 'rxjs/operators/startWith';
    @Component({
        selector: 'app-my-component',
        templateUrl: './app-my-component.component.html',
        styleUrls: ['./app-my-component.component.scss']
    })
    export class MyComponent implements OnInit, OnChanges {
        myControl: FormControl = new FormControl();
        options = ['One', 'Two', 'Three'];
        filteredOptions: Observable;

        constructor(private router: Router) { }

        filter(val: string): string[] {
            return this.options
                .filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0);
        }

        ngOnInit() {
            try {
                // temp code
                this.filteredOptions = this.myControl.valueChanges.pipe(
                    startWith(''),
                    map(val => this.filter(val))
                );
                // end of temp code
            } catch (exception) {
                // ....
            }
        }
    }

Answer 1

我暂时采用了以下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

Answer 2

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

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

2 个答案: