0

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>

1 respuesta 1

0

He encontrado una mejor forma de realizarlo usando [NgModel]

deben de agregar a imports FormsModule

mostrarcolumnaX = false;
mostrarcolumnaY = false;
mostrarcolumnaZ = false;
<div class="form-check">
  <input type="checkbox" class="checkbox" id="Xcol" [(ngModel)]="mostrarcolumnaX" [value]="!mostrarcolumnaX" />
  <label for="Xcol"> Show first column </label>
</div>

<div class="form-check">
  <input type="checkbox" class="checkbox" id="Ycol" [(ngModel)]="mostrarcolumnaY" [value]="!mostrarcolumnaY" />
  <label for="Ycol"> Show second column </label>
</div>

<div class="form-check">
  <input type="checkbox" class="checkbox" id="Zcol" [(ngModel)]="mostrarcolumnaZ" [value]="!mostrarcolumnaZ" />
  <label for="Zcol"> Show third column </label>
</div>
<br>
<table>
<thead>
<th *ngIf="mostrarcolumnaX" scope="col" [class.active]="order === 'comments_disagreed_count'" (click)="setOrder('comments_disagreed_count')">
  <div class="header-row">
    first column
  </div>
</th>
<th *ngIf="mostrarcolumnaY" scope="col" [class.active]="order === 'comments_disagreed_count'" (click)="setOrder('comments_disagreed_count')">
  <div class="header-row">
    second column
  </div>
</th>
<th *ngIf="mostrarcolumnaY" scope="col" [class.active]="order === 'comments_disagreed_count'" (click)="setOrder('comments_disagreed_count')">
  <div class="header-row">
    third column
  </div>
</th>
</thead>
<tbody>
<td *ngIf="mostrarcolumnaX">
  {{ Column Content }}
</td>

<td *ngIf="mostrarcolumnaY">
  {{ Column Content }}
</td>

<td *ngIf="mostrarcolumnaZ">
  {{ Column Content }}
</td>
</tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.