表单输入字段 Angular 5 上的 Material Design Lite *ngIf答案

【问题标题】：Material Design Lite *ngIf on Form Input Field Angular 5表单输入字段 Angular 5 上的 Material Design Lite *ngIf
【发布时间】：2018-06-16 14:16:27
【问题描述】：

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

这是有效的输入字段

<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 应该会在第一个 div 被填写后出现。

【问题讨论】：

添加后声明 var componentHandler: any;在组件之前，您可以调用 componentHandler.upgradeAllRegistered();就像 zfor 说的那样。

标签： forms input angular5 material-design-lite

【解决方案1】：

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

【讨论】：

好的，这是有道理的，我现在正试图弄清楚如何导入 MDL 组件处理程序。对此也有什么建议吗？