Angular2：使用 md-progress-circle

Question

我正在尝试在我的 Angular2 应用程序上使用 md-progress-circle。我有一个登录表单组件，当用户按下登录时，我会在表单上显示进度圆圈，直到登录完成（并居中）。这是我的代码：

<div class="flex-container">
<div style="width:400px;text-align:center">
    <md-progress-circle mode="indeterminate" color="primary" *ngIf="showSpinner">

         <!-- my code for login form -->
    </md-progress-circle>

</div>
</div>

现在如果我启动应用程序，我看不到登录表单。 md-progress-circle 遍历我的登录表单，事实上，如果我删除 *ngIf 条件，我只能看到圆圈，但看不到任何表单。怎么了？

Answer 1

您已将登录表单放入 md-progress-circle，这就是它不可见的原因。 <md-progress-circle></md-progress-circle> 标签之间的任何内容都将被组件忽略。您应该像这样将登录表单和 md-progress-circle 分开，

<div class="flex-container">
<div style="width:400px;text-align:center">
    <md-progress-circle mode="indeterminate" 
                        color="primary" 
                        *ngIf="showSpinner">
    </md-progress-circle>
    <div *ngIf="!showSpinner">
         <!-- my code for login form -->
    </div>
</div>
</div>

Angular2：使用 md-progress-circle

Angular2: using md-progress-circle

angular

material-design

angular-material2