如何在 Angular-4 中的 md-progress-spinner 中设置文本 [英] how to set text inside md-progress-spinner in Angular-4

问题描述

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

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

以及 ts 中的值:

 color = 'warn';模式 = '确定';值 = 50;showText='评级';

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

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

解决方案

此功能在 Material 中不可用.您需要手动创建它.您可以将 放在

内，并在其中添加另一个

以显示手动调整文本和位置:

<mat-progress-spinner [颜色]="颜色"[模式]="模式"[价值]="价值"咏叹调标签=评级"></mat-progress-spinner><div style="position:relative; top: -60px; left: 30px;">Rating</div>

链接到 stackblitz 演示.

In Angular-4 I am setting progress spinner like that

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

and the values in ts:

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

But I want to set some text inside the progress bar, I try to use angular-2 method but its not working in Angular-4 can anybody please tell me how its done in Angular-4

Angular-2 approach is to set [showText]='showText'

解决方案

This feature in not available in Material. You need to create it manually. You can place the <mat-progress-spinner> inside a <div> and add another <div> inside that to display the text and adjust position manually:

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

Link to stackblitz demo.

这篇关于如何在 Angular-4 中的 md-progress-spinner 中设置文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！