Javascript 如何在angular 6中为mat表格中的每一行显示mat微调器

我有一个mat表，显示正在执行的作业列表。我在每行旁边创建了两个按钮Stop和Re Run。但是，我想创建一个mat微调器，它仅在作业正在运行或用户单击“重新运行”按钮时显示。 我已经创建了微调器，但当我单击“重新运行”按钮时，它将显示所有行。 如何仅为单击的行显示它

我的html代码：

 <!--  Code for Stop and Re-Run Buttons -->
        <ng-container matColumnDef="actions">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element; let index = index">
                <button
                    mat-icon-button
                    (click)="stop_exec_job(element)"
                    matTooltip="Stop Executing the Job"
                    [disabled]="element.status == 'Completed'"
                >
                    <!-- Edit icon for row -->
                    <i class="material-icons" style="color:red"> stop </i>
                </button>
                <!-- Delete icon for row -->
                <button
                    mat-icon-button
                    (click)="re_run_job(element)"
                    matTooltip="Re-Run the Job"
                    [disabled]="
                        element.status == 'Running' ||
                        element.status == 'Pending'
                    "
                >
                    <i class="material-icons" style="color:green">
                        cached
                    </i>
                </button>
            </mat-cell>
        </ng-container>
        <!-- Code for Spinner -->
        <ng-container matColumnDef="spinner">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element">
                <div *ngIf="displaySpinner;else doNotShowSpinner">
                    <mat-spinner></mat-spinner>
                </div>
                <ng-template #doNotShowSpinner>

                </ng-template>
            </mat-cell>
        </ng-container>

        <mat-header-row
            *matHeaderRowDef="jobExecStatDisplayedColumns"
        ></mat-header-row>
        <mat-row
            *matRowDef="
                let row;
                columns: jobExecStatDisplayedColumns;
                let element
            "
            class="element-row"
        >
        </mat-row>

“停止并重新运行”按钮工作正常。如果我在第2行上单击“停止”，则只有第2行的状态会更改。但是，如果我在第1行上单击“运行”，则微调器将开始显示所有行，并且与“停止”类似。

您的displaySpinner属性是类的全局属性，它将在所有行中使用。这就是为什么当您单击“重新运行”时，“显示微调器”将变为true，并且由于所有行都具有相同属性的条件，因此它们都显示微调器

尝试使用element.status而不是displaySpinner

更改以下行：

下表：

displaySpinner属性是类的全局属性，它在所有行中都使用。这就是为什么当您单击“重新运行”时，“显示微调器”将变为true，并且由于所有行都具有相同属性的条件，因此它们都显示微调器

尝试使用element.status而不是displaySpinner

更改以下行：

下表：

---

将微调器链接到图元状态：

<!-- Code for Spinner -->
        <ng-container matColumnDef="spinner">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element">
                <div *ngIf="element.status === 'Running'">
                    <mat-spinner></mat-spinner>
                </div>
                <ng-template #doNotShowSpinner>

                </ng-template>
            </mat-cell>
        </ng-container>

---

我还建议为您的状态创建一个枚举，以确保可读性和一致性。

将微调器链接到元素状态：

<!-- Code for Spinner -->
        <ng-container matColumnDef="spinner">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element">
                <div *ngIf="element.status === 'Running'">
                    <mat-spinner></mat-spinner>
                </div>
                <ng-template #doNotShowSpinner>

                </ng-template>
            </mat-cell>
        </ng-container>

我还建议为您的状态创建一个枚举，以确保可读性和一致性。

停止执行作业函数仅更改单击的行状态的原因是您实际设置了传递给该函数的行元素的状态

re_run_job函数也会设置状态，但问题是在组件中使用一个变量displaySpinner来控制每行上所有微调器的可见性

若要解决问题，请在元素的 它分别存储每行微调器的状态，例如。 显示微调器

或者，如果微调器基于元素的状态，则可以将HTML更改为如下所示，并删除displaySpinner变量：

<div *ngIf="element.status === 'Pending' || element.status === 'Running'">
  <mat-spinner></mat-spinner>
</div>

stop_exec_job函数仅更改单击的行状态的原因是您实际设置了传递给该函数的rows元素的状态

re_run_job函数也会设置状态，但问题是在组件中使用一个变量displaySpinner来控制每行上所有微调器的可见性

若要解决问题，请在元素的 它分别存储每行微调器的状态，例如。 显示微调器

或者，如果微调器基于元素的状态，则可以将HTML更改为如下所示，并删除displaySpinner变量：

<div *ngIf="element.status === 'Pending' || element.status === 'Running'">
  <mat-spinner></mat-spinner>
</div>

---

您需要在每个元素对象中设置displaySpinner，而不是全局变量。因为这是一个循环，您需要检查每一行的displaySpinner逻辑，而不是全局单变量。您需要在每个元素对象中设置displaySpinner，而不是全局变量。因为这是一个循环，您需要检查每一行的displaySpinner逻辑，而不是全局单个变量