Estoy realizando una tabla dinamica, con la que el usuario pueda marcar que columna desea visualizar, el codigo que tengo actualmente, me muestra los que selecciono en la sección de checkbox, pero cuando tengo más de 2 seleccionados, y quiero quitar uno de los dos, me oculta todas mis otras columas que tengo con las propiedades declaradas (Columnas que tengo con NgClass).
Como puedo ir mostrando y ocultando una por una sin que se me oculten todas mis columnas por mas de que tenga seleccionado mi checkbox?
yo sé que es despues de que se valida el la condición de else, pero no se como separar cada una para que se coloque en false solo la que estoy desmarcando
onChange(e: any, index: any) {
console.log(e.target.checked);
console.log(index);
if (e.target.checked && index == 'one') {
this.showAcceptedComments = true
} else if (e.target.checked && index == 'two') {
this.showDisagreedComments = true
} else {
this.showAcceptedComments = false;
this.showDisagreedComments = true
}
}
.tabCol{
display: none;
}
<div>
<div class="form-check">
<input
type="checkbox"
(change)="onChange($event, 'one')"
name=""
id="accepted"
/>
<label for="accepted"> Accepted </label>
</div>
<div class="form-check">
<input
type="checkbox"
(change)="onChange($event, 'two')"
name=""
id="disagreed"
/>
<label for="disagreed"> Disagreed </label>
</div>
<div class="form-check">
<input
type="checkbox"
(change)="onChange($event, 'three')"
name=""
id="implemented"
/>
<label for="implemented"> Implemented Decisions </label>
</div>
</div>
<td [ngClass]="{ 'one tabCol': !showAcceptedComments }">
<!--{{ item.comments_accepted_count }}-->
{{NUMBERS OF COMMENTS ACCEPTED COUNT}}
</td>
<td [ngClass]="{ 'two tabCol': !showDisagreedComments }">
<!--{{ item.comments_disagreed_count }}-->
{{NUMBERS OF COMMENTS DISADREED COUNT}}
</td>