0

Em meu projeto tenho um card a qual quando clicar ele aparece as informações daquele usuário, o meu proposito é que ao clicar ele abra apenas do usuário que cliquei, mas no entanto, ele acaba abrindo todos os usuário, como na imagem abaixo

inserir a descrição da imagem aqui

Gostaria de saber se existe uma maneira de com o click eu apenas abra aonde eu cliquei, fiz umas pesquisas, mas só encontrei um método do AngularJS, a qual não se aplica em Angular 7. Segue também meu HTML e TS para analise

 getTable(){
    this.graphicsService.getTabela().subscribe(res => {
      this.table = res;
      console.table(this.table)
    });
  }
<div class="content-card" *ngFor="let item of table">
        <div class="client" (click)="teste = !teste">
          <span>{{ item.IdUser }} &nbsp; {{ item.NameUser }} &nbsp; {{ item.ClientAnswered }}</span>
        </div>
        <div class="client-info" [hidden]="!teste">
          <span>{{ item.DateMessage }}</span>
        </div>
      </div>

Desde já agradeço.

0

2 Respostas 2

1

Parece-me que você está usando a mesma variável para controlar o estado aberto/fechado de todos os itens da lista. Usando a ideia da resposta do @user3453562, você pode criar um array de boolean com o mesmo tamanho da sua variável table, assim:

state = [];

getTable()
{
    this.graphicsService.getTabela().subscribe(res =>
    {
        this.table = res;
        this.state.fill(false, this.table.length);
    });
}

E no seu .html:

<div class="content-card" *ngFor="let item of table; let i = index">
    <div class="client" (click)="state[i] = !state[i]">
        <span>{{ item.IdUser }} &nbsp; {{ item.NameUser }} &nbsp; {{ item.ClientAnswered }}</span>
    </div>
    <div class="client-info" [hidden]="state[i]">
        <span>{{ item.DateMessage }}</span>
    </div>
</div>

Um gif para melhor entendimento:

inserir a descrição da imagem aqui

1
  • Funcionou perfeitamente, muito obrigado. 27/01/2020 às 14:46
0

Olá!

Nessas situações utilizo dessa forma:

*ngFor="let test of tests; index as i"

Dessa forma, identifico cada item pelo index, ao criar o html.

<div>
   <div>{{ test.nome }}</div>
   <div><button (click)="openOption(i)">Edit</button></div>
</div>
1
  • No caso vc no click adiciona um método, como seria esse método? 27/01/2020 às 12:08

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 .