p-progressbar 不更新 *ngfor Angular 中的值

Question

我在我的项目中使用 primeng 9 和 angular 9。我在带有 *ngfor 的 ngtemplate 中有一个 p-progressbar。我认为该值没有变化，或者可能只是组件没有更新 UI。下面的所有代码都在 p-table.

中

<ng-template pTemplate="header" *ngFor="let bearing of bearings; index as i; first">
        <tr *ngIf='!!bearing'>
            <th></th>
            <th>{{'TCW.SHARED.SN' | translate}}</th>
            <th></th>
            <th>
                <div class="d-flex justify-content-center align-rowDatas-center">
                    <span translate="TCW.SHARED.BEARING_NAME" [translateParams]="{value: bearing.setpoint}"
                        class="text-ellipsis d-inline-block" style="max-width: calc(100% - 19px)"></span>
                    &nbsp;<span class="fa fa-info-circle position-relative top-minus-1px"
                        [pTooltip]="bearing | bearingConfig" [escape]="false" tooltipPosition="bottom"></span>
                </div>

                <div class="position-relative">
                    <p-progressBar [value]="bearing.progress" [showValue]="false"></p-progressBar>

                    <div class="remaining-time" 
                        [ngClass]="{'reverse': bearing.progress <= 49}">

                        <span
                            class="fa fa-hourglass-half x0-8"></span>&nbsp;<span>{{bearing.remainingS | humanDuration  }}</span>
                    </div>
                </div>
            </th>
        </tr>
    </ng-template>

当我刷新页面时，进度条更新 UI。我在另一个组件中有相同的代码并且运行良好。

感谢您的帮助。

Answer 1

不允许在 <ng-template> 上使用 *ngFor，因为 *ngFor 会生成 <ng-template>。如果我没记错的话，在 <ng-template> 上使用结构指令将在编译中显示为错误。试试这个来解决这个问题：

<ng-template pTemplate="header">
  <ng-container *ngFor="let bearing of bearings; index as i; first">
    ...
  </ng-container>
</ng-template>

*ngFor，或任何以*开头的指令，都是structural directives。它们是创建 <ng-template>.

的语法糖

p-progressbar 不更新 *ngfor Angular 中的值

p-progressbar doesn't update value in *ngfor Angular

angular

progress-bar

primeng

primeng-turbotable