1

我正在尝试根据我的 API 中的“是”或“否”值在 *ngFor 中实现切换滑块。必须在初始模态负载上检查初始切换滑块状态（滑块向左或向右）。

我在加载我的模式时获得了初始状态，但如果来自 API 的响应值为“否”，我无法滑动切换“是”。顺便说一句，我正在使用 Bootstrap 4。

我尝试了多种添加 NgClass 的变体，但我似乎无法让这部分工作。

这是我到目前为止所尝试的。

admin.component.html

<form [formGroup]="permissionForm">
                            <div class="form-group card" *ngFor="let item of permissionsUserMap; let i=index">
                              <div class="row p-1">
                                <div class="col">
                                  <p class="d-inline">{{ item.permissionToolTip }} {{ item.hasPermission }}</p>
                                </div>
                                <div class="col">
                                  <label class="switch float-right mb-0">
                                    <input 
                                      #permissionToggle
                                      [id]="i"
                                      formControlName="HasPermission"
                                      type="checkbox" 
                                      (change)="onChangePermission($event,i)" 
                                      [value]="item.hasPermission"
                                      >
                                    <!-- <ng-container *ngIf="item.hasPermission === 'Y'">
                                      <span [ngClass]="{'input:checked,input:focus + slider round': item.hasPermission === 'Y'}"></span>
                                    </ng-container>
                                    <ng-container *ngIf="item.hasPermission === 'N'">
                                      <span [ngClass]="{'slider round': item.hasPermission === 'N'}"></span>
                                    </ng-container> -->

                                    <!-- <span *ngIf="item.hasPermission === 'Y'" [ngClass]="'slider round'">Y</span>
                                    <span *ngIf="item.hasPermission != 'Y'" [ngClass]="'noPermission round'">N</span> -->

                                    <!-- <span *ngIf="item.hasPermission === 'Y'" [ngClass]="'slider round'">Y</span>
                                    <span *ngIf="item.hasPermission != 'Y'" [ngClass]="'noPermission round'">N</span> -->

                                    <!-- <span class="slider round"></span> -->

                                    <span class="slider round" *ngIf="item.hasPermission === 'Y'"></span>
                                    <span class="noPermission round" *ngIf="item.hasPermission === 'N'"></span>
                                  </label>
                                </div>
                              </div>
                            </div>
                          </form>

admin.component.css

/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}

input:checked + .slider {
background-color: rgba(58,177,96,1);
}

input:focus + .slider {
box-shadow: 0 0 1px rgba(58,177,96,1);
}
input:focus + .slider {
box-shadow: 0 0 1px rgba(58,177,96,1);
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

.noPermission {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
    
.noPermission:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.noPermission.round {
    border-radius: 34px;
}
        
.noPermission.round:before {
    border-radius: 50%;
}

input:checked + .noPermission.slider {
    background-color: rgba(58,177,96,1);
    }
    
    input:focus + .noPermission {
    box-shadow: 0 0 1px rgba(58,177,96,1);
    }

input:checked + .noPermission:before {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

提前致谢。

4

0 回答 0