Question

在Angular-4中，我正在设置像这样的进度微调器

 <md-progress-spinner [color]="color" [mode]="mode" [value]="value" aria-label="Rating">Rating</md-progress-spinner>

和ts中的值：

  color = 'warn';
  mode = 'determinate';
  value = 50;
  showText='Rating';

但是我想在进度条中设置一些文本，我尝试使用angular-2方法但是它在Angular-4中不起作用可以请任何人告诉我它是如何在Angular-4中完成的

Angular-2方法是设置[showText]='showText'

Answer 1

此功能在材料2中不可用。您需要手动创建它。您可以将<md-progress-spinner>置于<div>内，并在其中添加另一个<div>以显示文字并手动调整位置：

<div>
    <md-progress-spinner [color]="color" 
                         [mode]="mode" 
                         [value]="value" aria-label="Rating" 
                         mode="determinate"></md-progress-spinner>
    <div style="position:relative; top: -60px; left: 30px;">
        {{ showText }}
    </div>
</div>

链接到stackblitz demo。

Answer 2

这是一个更好的解决方案

<div class="card border-0" [style.width.px]="185">
   <mat-progress-spinner [color]="'warn'" [mode]="'determinate'" [strokeWidth]="18" [diameter]="185" [value]="56" class="card-img">
   </mat-progress-spinner>

   <div class="card-img-overlay d-flex justify-content-center align-items-center p-0">
     <div class="card border-0 bg-transparent" [style.width.px]="135">
        <mat-progress-spinner [color]="'primary'" [mode]="'determinate'" [strokeWidth]="7" [diameter]="135" [value]="100" class="card-img">
        </mat-progress-spinner>

        <div class="card-img-overlay d-flex justify-content-center align-items-center p-0">
           <h1 class="letter-spacing text-muted text-center font-weight-normal">
              56%
              <h6 class="text-uppercase">
                 <small class="letter-spacing-2 font-weight-500">increase</small>
              </h6>
           </h1>
        </div>
     </div>
   </div>
</div>

为此，您需要引导程序4 css。

如何在Angular-4

2 个答案: