Angular2：使用 md-progress-circle

【问题标题】：Angular2: using md-progress-circleAngular2：使用 md-progress-circle
【发布时间】：2017-03-02 15:46:34
【问题描述】：

我正在尝试在我的 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 条件，我只能看到圆圈，但看不到表单。怎么了？

【问题讨论】：

标签： angular material-design angular-material2

【解决方案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>

【讨论】：

好的，所以没有办法显示登录表单的进度？
您可以在登录表单上显示进度圈，方法是使用适当的 CSS 位置作为进度圈并从登录表单中删除 *ngIf。