Создание динамического текстового поля

Question

Мы создаем приложение с Angular 7 с Material Design (не Angular Material!).

Я загружаю некоторые данные после выбора Selectbox, и с этим я пытаюсь создать список, который имееттекстовые поля в нем.

<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])
    }
  }

Кажется, что текстовые поля созданы, я могу нажать на них, иэффекты работают, но кажется, что текст (ngModel) впоследствии активируется, поэтому он не является частью создания экземпляра.После того, как я щелкну текстовое поле, оно будет отображаться в правильном направлении.

Проблема выглядит так, будто значение записывается после инициализации MDCTextField.Что мне не хватает?Или есть другой способ создания экземпляров текстовых полей после загрузки данных?

РЕДАКТИРОВАТЬ:

Я создал пример StackBlitz, вы можете выбрать что-то в поле выбора, и вы увидите, чтоМетка из текстового поля активируется после ввода текстового поля.

StackBlitz

Код

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':''"