首页 文章

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

提问于
浏览 次
1

我使用角度材料文档中提供的相同的确切代码 . 根据Angular Material Website，角度材料 mat-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>

我的打字稿文件中的代码

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) {
                // ....
            }
        }
    }
angular angular-material

1 回答

  • 0

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

    回复于

相关问题