如何在mat-table中有条件地禁用行

Question

我有mat-table，在其中显示一些工作信息。我想有条件地检查一下，如果作业类型是即席的，则应禁用该行的切换按钮，如果安排了作业类型，则切换按钮应处于活动状态。用当前的代码如何实现该功能。

在作业类型中，我在property.value中获得作业类型的值。我使用*ngIf="property.key == 'scheduleType'"检查该值。在property.value中，我得到了临时的或预定的。如果我收到即席通知，则希望禁用切换按钮。

HTML代码：

<div class="oi-line-row">
    <table mat-table
           [dataSource]="dataSource"
           matSort
           class="mat-elevation-z8">
        ​
        <!-- Job Type Column -->
        <ng-container matColumnDef="type">
            <th mat-header-cell
                *matHeaderCellDef
                mat-sort-header>Type</th>
            <td mat-cell
                *matCellDef="let element">
                <ng-container *ngFor="let property of element.properties">
                    <!-- {{ element.country }}           -->
                    <span *ngIf="property.key == 'scheduleType'">
                        {{ property.value }}
                    </span>
                </ng-container>
            </td>
        </ng-container>
        <!-- toggle column -->
        <ng-container matColumnDef="toggle">
            <th mat-header-cell
                *matHeaderCellDef>toggle</th>
            <td mat-cell
                *matCellDef="let element">
                <mat-slide-toggle [checked]="element.active"
                                  (change)="updateActiveStatus(element)"></mat-slide-toggle>
            </td>
        </ng-container>

Answer 1

在mat-slide-toggle的[checked]属性中使用管道。传递元素并返回true或false值。由于您可以从作业类型列中的元素访问property.value，因此您还可以在管道内部执行相同的操作，因为同一元素将被传递到管道。祝好运。