Angular 4中mat-input占位符与绑定数据重叠问题求助

嘿，这个问题我当年用Material beta版本的时候踩过好几次坑！本质是这个早期版本的mat-form-field在数据初始绑定完成后，没有自动检测到输入框已经有值，所以没把placeholder正常浮到上方。给你几个亲测有效的解决方案：

方案1：手动触发输入框状态更新（最靠谱） #

组件初始化和数据加载的时机经常错位，我们可以在数据加载完成后，手动调用MatInput的内部方法来触发状态更新。

首先在组件类里引入相关依赖，获取所有的MatInput实例：

import { Component, OnInit, AfterViewInit, ViewChildren, QueryList } from '@angular/core';
import { MatInput } from '@angular/material';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit, AfterViewInit {
  @ViewChildren(MatInput) matInputs: QueryList<MatInput>;
  b: any[];

  constructor(private yourDataService: YourDataService) {}

  ngOnInit() {
    // 假设你从服务获取数据
    this.yourDataService.getYourData().subscribe(data => {
      this.b = data;
      // 用setTimeout确保视图已经完成更新
      setTimeout(() => {
        this.updateInputStates();
      }, 0);
    });
  }

  ngAfterViewInit() {
    // 如果数据是组件初始化时就有的，也可以在这里处理
    if (this.b?.length) {
      this.updateInputStates();
    }
  }

  private updateInputStates() {
    this.matInputs.forEach(input => {
      // 触发输入事件，让组件检测到值并上浮placeholder
      input._onInput();
    });
  }
}

方案2：强制控制Placeholder浮动状态 #

通过mat-form-field的floatLabel属性，根据输入框是否有值来强制设置浮动状态：

<div class="col-xs-12 col-lg-3 col-sm-3 col-md-3 no_pad mb20 nopadMbl">
  <form class="col-xs-12 no_pad example-form">
    <mat-form-field 
      class="col-xs-12 nopadMbl example-full-width" 
      *ngFor="let data of b"
      [floatLabel]="data.Tower ? 'always' : 'auto'"
    >
      <input matInput placeholder="Tower" name="Tower" class="col-xs-12 no_pad" [(ngModel)]="data.Tower">
    </mat-form-field>
  </form>
</div>

这个方案比较直接，不需要修改组件逻辑，亲测在beta.12版本中floatLabel属性是支持的。

方案3：检查Material样式是否正确导入 #

如果上面的方法都没用，先确认你是否在全局样式文件（比如styles.css）中导入了Material的主题样式：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

缺失主题样式可能导致mat-form-field的浮动逻辑无法正常工作。

内容的提问来源于stack exchange，提问作者nikhil