-1

Preciso de uma ajuda, tenho uma tabela, ao clicar no checkbox de uma determinada linha, somente o nome do analista presente neste linha deve ficar com a cor vermelha, mas da forma que implementei ao clicar no checkbox presente em uma linha, todos os nomes de analistas das demais linhas também recebem a classe, estou com dificuldade para solucionar este problema.

Alguém poderia me ajudar?

table-bids-rids.component.html

<table mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="bidRid">
        <th mat-header-cell *matHeaderCellDef> BID/RID </th>
        <td mat-cell *matCellDef="let element">
            <mat-checkbox checked="true" (change)='onChange($event)'> {{element.bidRid}}</mat-checkbox>
        </td>
    </ng-container>
    <ng-container matColumnDef="section">
        <th mat-header-cell *matHeaderCellDef>Seção</th>
        <td mat-cell *matCellDef="let element"> 
            <span class="radio-input"><mat-radio-button value="1" class="{{element.radioOne}}"></mat-radio-button> {{element.trib}}</span>
            <span class="radio-input"><mat-radio-button value="1" class="{{element.radioTwo}}"></mat-radio-button> {{element.trab}}</span>
            <span class="radio-input"><mat-radio-button value="1" class="{{element.radioTree}}"></mat-radio-button> {{element.prev}}</span>
        </td>
    </ng-container>
    <ng-container matColumnDef="analist">
        <th mat-header-cell *matHeaderCellDef> Analista </th>
        <td mat-cell *matCellDef="let element"> 
            <span [ngClass]="{'old': toggle, 'new': !toggle}">{{element.analist}}</span>
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[3, 10, 20]" showFirstLastButtons></mat-paginator>

table-bids-rids.component.scss

table{
    th.mat-header-cell{

        &:nth-child(1){
            width:25%;
        }
    }

    td.mat-cell{
        vertical-align:middle;
    }

    .hide{
        display:none;
    }

    .radio-input{
        padding:0 10px;
    }
}


.old{
    color:green;
}
.new{
    color:red;
}

table-bids-rids.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-table-bids-rids',
  templateUrl: './table-bids-rids.component.html',
  styleUrls: ['./table-bids-rids.component.scss']
})
export class TableBidsRidsComponent implements OnInit {
  displayedColumns: string[] = ['bidRid', 'section', 'analist'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  toggle: boolean = true;
  isChecked:any=false;

  onChange($event:Event){
     console.log($event);
     console.log("value changed");
     this.toggle = !this.toggle;
  }
  
  ngOnInit() {
    this.dataSource.paginator = this.paginator;
  }
}

export interface Element {
  bidRid: string;
  trib: string;
  trab: string;
  prev: string;
  radioOne: string,
  radioTwo: string,
  radioTree: string,
  analist: string;
}

const ELEMENT_DATA: Element[] = [
  {bidRid: 'Obrigações Não Acessórias', radioOne: '', trib: 'Tributária', radioTwo: '', trab: 'Trabalhista', radioTree: '', prev: 'Previdenciaria', analist: 'Bruce Banner'},
  {bidRid: 'Obrigações Acessórias', radioOne: '', trib: 'Tributária', radioTwo: 'hide', trab: '', radioTree: 'hide', prev: '', analist: 'Bruce Banner'},
]

1 Resposta 1

-1

Pelo que podemos ver, a variável (toggle) que determina o se um elemento está marcado está no escopo do componente, desta forma tem o mesmo valor para todas as linhas.

Você deve colocá-la na interface Element, desta forma valerá apenas para linha marcada, no evento onchange, passe a referência para o element além do $event, desta forma você saberá com qual linha o usuário está interagindo.

Por fim, ajuste o controle da classe no span para se referenciar ao campo do elemento.

Espero ter ajudado.

Abraços, Bernardo Baumblatt

1
  • Muito obrigado pelo retorno Bernardo! Sou novo no Angular, seria possível exemplificar através de código por favor? 7/09/2020 às 15:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .