Material Design Lite *ngIf 表单输入字段 Angular 5

Question

我想构建一些动态表单域。当我在 div 前面放置 *ngIf 时，material 设计无法正常工作（无效果等）。

这是有效的输入字段

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="number" id="playerCount" [(ngModel)]="playerCount" (ngModelChange)="setPlayerCount(playerCount)">
  <label class="mdl-textfield__label" for="playerCount">Anzahl Spieler</label>
</div>

还有一个不起作用

<div *ngIf="players" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="stuff">
  <label class="mdl-textfield__label" for="stuff">stuff</label>
</div>

第二个 div 应在第一个填写后立即出现。

Answer 1

您必须将新元素注册到 MDL 的 componentHandler，因为 *ngIf 实际上会从 dom 中删除该元素，您必须每次 Angular removes/inserts 注册该元素] 它。您可以在每次 *ngIf 插入元素时调用 componentHandler.upgradeAllRegistered(); 或将 *ngIf 替换为仅隐藏元素但不删除元素的内容。

Material Design Lite *ngIf 表单输入字段 Angular 5

Material Design Lite *ngIf on Form Input Field Angular 5

forms

input

angular5

material-design-lite