使用Ionic 4 + Angle的时间记录器

时间:2019-07-17 11:39:37

标签: javascript angular typescript ionic4

我正在使用Ionic 4创建一个时间记录器,我添加了一个名为circle progress的ng插件。当我的圈子达到设置的时间的100%时,我希望显示时间计数器停止。

打字稿代码:

                 重设时间                            

   <circle-progress (click)="startTime()" [percent]="percent" [radius]="radius" [maxPercent]="100" [showTitle]="false"
     [showSubtitle]="false" [showUnits]="false" [outerStrokeWidth]="16" [outerStrokeColor]="'#8000FF'"
     [showZeroOuterStroke]="false" [backgroundStroke]="'#33003F'" [backgroundStrokeWidth]="3"
     [outerStrokeGradient]="true" [outerStrokeGradientStopColor]="'#FF00CB'" [showInnerStroke]="false">
   </circle-progress>

   <p>{{ elapsed.h }}: {{ elapsed.m}}: {{ elapsed.s}}</p>

   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ng-container *ngIf="timer == false; else running">
       <ion-fab-button (click)="startTime()">
         <ion-icon name="play"></ion-icon>
       </ion-fab-button>
     </ng-container>
     <ng-template #running>
       <ion-fab-button (click)="stopTime()">
         <ion-icon name="square"></ion-icon>
       </ion-fab-button>
     </ng-template>
   </ion-fab>

 </ion-content>

我不知道该怎么办。

0 个答案:

没有答案