角材料仅呈现表单的一部分

Question

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

我卸载并安装了Node and 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元素（最后一个）仅在单击第一个字段后创建。 （我在检查器中看到了一种闪光）。

就在送达之后

点击第一个字段后：

Answer 1

当我在stackblitz上运行代码时，代码似乎可以正常工作。

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

尝试一次

在pollyfills.ts

import 'hammerjs';

在styles.css

中

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

Answer 2

我的朋友们。

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

为什么？我在Angular 6.x版本的Core中运行了代码，并且成功了！

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

谢谢。