Forms 材料设计Lite*ngIf表单输入字段角度5

我想构建一些动态表单字段。 当我把一个*ngIf放在div的前面时，材料设计不能正常工作（没有效果等）

这是有效的输入字段

<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填写完毕后立即出现

---

您必须将新元素注册到MDL的

componentHandler

，因为*ngIf实际上从dom中删除了元素，所以每次Angular删除/插入该元素时，您都必须注册该元素。

---

您可以调用

componentHandler.upgradeAllRegistered（）

每次*ngIf插入元素或用隐藏元素但不删除它的内容替换*ngIf时。

好的，这很有意义，我现在正试图弄清楚如何导入MDL componenthandler。在添加declare-var-componentHandler:Any之后，还有什么建议吗；在创建组件之前，可以调用componentHandler.upgradeAllRegistered（）；就像zfor说的那样。