Question

我们正在使用材质设计（不是Angular Material！）的Angular 7创建应用程序。

在选择框之后，我正在加载一些数据，为此，我试图创建一个包含文本字段的列表。

<ul class="mdc-list">
  <ng-container *ngFor="let item of ItemsHeaders; index as i">
    <li class="mdc-list-item">
      <div #mtf class="mdc-text-field">
        <input type="text" id="my-text-field" attr.name="{{item[0]}}" [ngModel]="item[0]" (ngModelChange)="valuechange(i, item[0], $event)" class="mdc-text-field__input">
        <label class="mdc-floating-label" for="my-text-field">Name</label>
        <div class="mdc-line-ripple"></div>
      </div>

      <button type="button" class="mdc-button mdc-dialog__button" [disabled]="buttons[i] == 0" (click)="SaveColumn(item[0])">
        <span class="mdc-button__label"><i class="material-icons">save</i></span>
      </button>
    </li>
  </ng-container>
</ul>

      this.ItemsHeaders = data;

      this.buttons = Array(data.length).fill(0);

      new MDCList(document.querySelector('.mdc-list'));

      var buttons = document.querySelectorAll('.mdc-button');

      for (var i = 0; i < buttons.length; ++i) {
        new MDCRipple(buttons[i])
      }

此刻，我已经设置了一个ViewChild：

  @ViewChildren('mtf') textfields;

ngAfterViewInit() {
    this.textfields.changes.subscribe(() => this.setupTextField());
  }

  setupTextField() {
    var textFields = document.querySelectorAll('.mdc-text-field');

    for (var i = 0; i < textFields.length; ++i) {
      new MDCTextField(textFields[i])
    }
  }

Textfields似乎已实例化，我可以单击它们，并且效果正在起作用，但是文本（ngModel）之后似乎已激活，因此它不是实例化的一部分。单击文本字段后，它以正确的方式显示。

问题似乎是在初始化MDCTextField之后正在写入值。我想念什么？还是在加载数据后还有另一种实例化文本字段的方法？

编辑：

我创建了一个StackBlitz示例，您可以在“选择框”中选择某些内容，然后您会看到输入文本框后，该文本字段中的标签被激活。

StackBlitz

Code

Answer 1

我刚刚解决了您面临的问题！

这是工作示例！享受：D

https://stackblitz.com/edit/angular-jyzsba

需要做的就是在有预先填充的文本时将类从mdc-floating-label更改为mdc-floating-label mdc-floating-label--float-above。

更好/有角度的方式是：

[ngClass]="inputString.length>0?'mdc-floating-label mdc-floating-label--float-above':''"

实例化动态文本字段

1 个答案: