时间戳

首页 > 解决方案 > 如何禁用未选中的复选框和选中的复选框可以切换？在角度 8 的 ngFor 循环中？

angular - 如何禁用未选中的复选框和选中的复选框可以切换？在角度 8 的 ngFor 循环中？

问题描述

<div id="col-container">
    <mat-card id="profile-card" *ngFor="let candidate of obj_users; let i = index;  ">
        <img class=" candidates-image" mat-card-image src="{{candidate.photo }}" />
        <mat-card-content>
            <h3 style="margin-bottom: 8px;"> {{ candidate.firstname }}
                {{ candidate.lastname}} </h3>
            <!-- <p *ngIf=""> PRESIDENT </p> -->
            <p> {{ candidate.position_id }} </p>
            <mat-divider [inset]="true"></mat-divider>
            <p> {{ candidate.platform }}</p>
            <p> {{ candidate.nation }}</p>
            <label class="switch">
                <input [disabled]="disabledButton" (change)="OnChange($event , i)" id="checkbox" type="checkbox">
                <span matRipple id="purecbx">VOTE</span>
            </label>
        </mat-card-content>
    </mat-card>
</div>

标签： angulartypescript

解决方案

您必须在 obj_users 中添加一个属性作为 disabledButton 以便每个候选人都有一个属性 disableButton 并且您可以使每个 buuton 禁用并管理它的雕像，分别检查

<label class="switch">
       <input [disabled]="candidate.disabledButton" (change)="OnChange($event , i)" id="checkbox" type="checkbox">
       <span matRipple id="purecbx">VOTE</span>
</label>

要启用复选框，请将 obj_users disableButton 属性的索引设置为 false，以便用户可以选中和取消选中

推荐阅读