进度条重复百分比

Question

我开发了一个响应式进度条，但是进度值​​是重复的。只应显示中心值。

有人知道我怎么能解决这个问题吗？

演示

 <div id="tab1">
      <dx-data-grid class="tableTask" [dataSource]="datas" [showColumnLines]="false"
        [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="false">
        <dxo-header-filter [visible]="true"></dxo-header-filter>
        <dxo-remote-operations [sorting]="true" [paging]="true" [filtering]="true"></dxo-remote-operations>
        <dxo-paging [pageSize]="200"></dxo-paging>
        <dxi-column dataField="id" caption="ID" [width]="100" [allowFiltering]="false" [allowSorting]="false"></dxi-column>
        <dxi-column dataField="name" caption="Name"></dxi-column>
        <dxi-column dataField="surname" caption="Surname"></dxi-column>
           <dxi-column dataField="progress" cellTemplate="Progress" caption="Progress"></dxi-column>
            <div *dxTemplate="let data of 'Progress'">
          <div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text">{{data.key.progress}} %</div>
            <div class="progress-bar" [style.width]="data.key.progress + '%'">
              <div class="progress-text">{{data.key.progress}} %</div>
            </div>
          </div>
            </div>
      </dx-data-grid>
    </div>

​

​

Answer 1

我删除了进度条中的百分比值，并添加了z索引。

这应该能起作用：

 <div id="tab1">
      <dx-data-grid class="tableTask" [dataSource]="datas" [showColumnLines]="false"
        [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="false">
        <dxo-header-filter [visible]="true"></dxo-header-filter>
        <dxo-remote-operations [sorting]="true" [paging]="true" [filtering]="true"></dxo-remote-operations>
        <dxo-paging [pageSize]="200"></dxo-paging>
        <dxi-column dataField="id" caption="ID" [width]="100" [allowFiltering]="false" [allowSorting]="false"></dxi-column>
        <dxi-column dataField="name" caption="Name"></dxi-column>
        <dxi-column dataField="surname" caption="Surname"></dxi-column>
           <dxi-column dataField="progress" cellTemplate="Progress" caption="Progress"></dxi-column>
            <div *dxTemplate="let data of 'Progress'">
          <div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text" style="z-index:2">{{data.key.progress}} %</div>
            <div class="progress-bar" style="z-index:1" [style.width]="data.key.progress + '%'">
            </div>
          </div>
            </div>
      </dx-data-grid>
    </div>

Answer 2

只需从下面的条形码(白色的<div class="progress-text">{{data.key.progress}} %</div> )中删除这一行<div class="progress-text">{{data.key.progress}} %</div>，并删除bar %的progress-bar中的<div class="progress-text">{{data.key.progress}} %</div>

<div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text">{{data.key.progress}} %</div>
            <div class="progress-bar" [style.width]="data.key.progress + '%'">
              <div class="progress-text">{{data.key.progress}} %</div>
            </div>
          </div>

Answer 3

我想你只想显示白字。

为此，您需要删除app.component.html文件中的第15行，并向类progress-text添加一个大的z索引。