如何在条内显示离子进度条值

Question

到目前为止，对于应该如此简单的事情，我找不到解决方案。

我需要在活动进度条中显示百分比值，但似乎无法正确完成。

Josh Morony 有这个例子，它在视觉上是我们需要实现的。

这是我的。我注释掉的 div 有效，但我需要它显示在实际栏内。

<!-- <div class="showPercentProgress"> {{ percentageValue }}%</div> -->
        
<ion-progress-bar color="primary" type="determinate" [value]="progressStatus"> 
      {{ percentageValue }}%
</ion-progress-bar>

Answer 1

你能看看这个例子吗：https://stackblitz.com/edit/angular-2ltyru

这几乎是一样的。也可以包含在离子中。

Answer 2

ok，所以你必须使用

ionic generate component

命令创建一个组件，你必须在组件的 html 中放入离子进度条，例如：

   <div class="progress-container" *ngIf="isLoading">
  <ion-progress-bar [value]="progress"></ion-progress-bar>
  <div class="progress-label">{{ progress * 100 | number:'1.0-0' }}%</div>
</div>

我选择我的进度条的CSS，例如它可以是这样的：

    .progress-container {
  position: relative;
}

.progress-label {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #000; // Change to match your design
}

然后对于组件的代码，您可以这样写：

    import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {UserCrudService} from "../services/user/user-crud.service";
import {ProgressService} from "../progress.service";
import {Subscription} from "rxjs";

@Component({
  selector: 'app-progress-bar',
  templateUrl: './progress-bar.component.html',
  styleUrls: ['./progress-bar.component.scss']
})
export class ProgressBarComponent implements OnInit, OnDestroy {
  @Input() progress: number = 0;
  isLoading: boolean = false;
  private loadingSub: Subscription;

  constructor(private progressService: ProgressService) {

    this.progressService.currentProgress.subscribe(progress => this.progress = progress);
  }

  ngOnDestroy(): void {
    throw new Error('Method not implemented.');
  }

  ngOnInit() {
    this.loadingSub = this.progressService.isLoading.subscribe(loading => {
      this.isLoading = loading;
    });
  }
}

现在，然后，您必须使用链接您的 HttpClient 请求的

ionic generate service

创建一个服务。在服务类中，你放置这样的代码：

import { Injectable } from '@angular/core';

从“rxjs”导入 {BehaviorSubject}；

@Injectable({
  providedIn: 'root'
})
export class ProgressService {
  isLoading = new BehaviorSubject<boolean>(false);
  private progressSource = new BehaviorSubject<number>(0);
  currentProgress = this.progressSource.asObservable();

  changeProgress(progress: number) {
    this.progressSource.next(progress);
  }
}

然后根据您的要求，完全像离子进度条的计数那样链接：

      constructor(private progressService: ProgressService,private httpClient: HttpClient) {

  }

这是构造函数，然后是返回 Observable 对象的请求： :

 putDemiDay(jourTravail: JourTravail): Observable<any> {
    const data: any = {jourTravail: jourTravail};
    let drapeau: boolean;
    const datas = JSON.stringify(data);
    this.progressService.isLoading.next(true);
    return this.httpClient.post(this.endpoint + '/jdt/createJTravail', datas, {
      headers: this.createAuthorizationHeader(), reportProgress: true,
      observe: 'events'
    }).pipe(tap(
        event => {
          if (event.type === HttpEventType.UploadProgress) {
            const progress = Math.round(100 * event.loaded / event.total);
            this.progressService.changeProgress(progress);
            console.log(event);
          } else if (event.type === HttpEventType.Response) {
            console.log('insertion des presences de demi journées effectuée');
            this.progressService.isLoading.next(false);
            console.log(event);
          }
      }),
      catchError(this.handleError('impossible d\'enregistrer les demijournées')));
  }

看看我在管道函数中做了什么。现在，不要忘记创建一个 progress-bar.module.ts 文件，你必须声明并导出你的组件，代码是：

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProgressBarComponent } from './progress-bar.component';

@NgModule({
  declarations: [
    ProgressBarComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    ProgressBarComponent
  ]
})
export class ProgressBarModule { }

所以，现在你必须在你想要显示进度条的模块中导入 ProgressBarModule :

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        PresencePageRoutingModule,
        ReactiveFormsModule,
      ProgressBarModule
    ],

然后在要显示进度条的模块的 html 中，放置以下 html 代码：

对于组件ProgressBar，你还有其他问题吗？