Angular Material 仅呈现部分形式答案

【问题标题】：Angular Material renders only part of formAngular Material 仅呈现部分形式
【发布时间】：2019-01-04 07:40:14
【问题描述】：

我使用 Angular Material 制作了一个表单，但它只呈现了部分内容，并且在我单击一个字段后，其余的输入就会出现。

我卸载并安装了 Node 和 Angular...我使用的是最新版本（直到今天）。未解决。

我按照以下说明操作：https://alligator.io/angular/angular-material-2/

app.component 的代码：

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<router-outlet></router-outlet>

<div class="form-group">
  <mat-form-field>
    <mat-label>Nome</mat-label>
    <input type="text" ngModel name="Nome" matInput required>
  </mat-form-field>
</div>

<div class="form-group">
  <mat-form-field>
    <mat-label>E-mail</mat-label>
    <input type="email" ngModel name="Email" matInput required>
  </mat-form-field>
</div>

<div class="form-group">
  <mat-form-field>
    <mat-label>Senha</mat-label>
    <input type="password" ngModel name="Senha" matInput required>
  </mat-form-field>
</div>

<div class="form-group">
  <mat-form-field>
    <mat-label>xxx</mat-label>
    <input type="text" ngModel name="xxxxxxx" matInput required>
  </mat-form-field>
</div>

<div class="form-group">
  <mat-form-field>
    <mat-label>yyy</mat-label>
    <input type="text" ngModel name="yyyyyyy" matInput required>
  </mat-form-field>
</div>

当我打开 localhost:4200 时，只出现 2 个字段，但我希望看到所有字段。在我点击或输入第一个字段后，其他字段显示...

我使用 Chrome 进行检查，并且我认为只有在单击第一个字段后才创建 DOM 元素（最后一个）。（我在检查器中看到了一种闪光）。

就在 ng 服务之后

点击第一个字段后：

【问题讨论】：

在这种情况下尝试检查控制台！那里有任何错误或警告吗？

标签： angular angular-material angular7

【解决方案1】：

当我在 stackblitz 上运行该代码时，它似乎正在运行。

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

尝试一次

在 pollyfills.ts 中

import 'hammerjs';

在styles.css中

@import '@angular/material/prebuilt-themes/indigo-pink.css';

【讨论】：

嗨！我现在尝试了你的建议，但它还没有奏效。尽管如此，还是非常感谢你。并祝您新年快乐！
您共享的代码中的一切似乎都是正确的。检查你的 .ts 文件一次。
Anil，感谢您的建议...我现在创建了一个新应用程序（按照上面的说明），但它不再工作了。哦，我的 G...

【解决方案2】：

我的朋友们。

似乎这种行为是由 Angular 7 引起的。

为什么？我在 Angular 6.x 版本的 Core 中运行了代码，它工作了！

我还没有找到如何控制这种行为，但我会找到解决方案 - 当然是你。

谢谢。

【讨论】：

你找到解决方案了吗？