如何在Angular-4中设置MD-Progress-Spinner中的文本

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

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

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

链接到 stackblitz demo 。

Answer 2

如果您在项目中使用bootstrap 4，这是一个更好的解决方案

<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>