How to hide and show a div dynamically?

Question

I need to dynamically show and hide a div. I even got something very simple using *ngIf, but what I need is that: When you click "the grid button", it opens the div only with the information relating to this "item". Today as I am doing on top of a boolean variable, my list is loaded, and as the div is static, when I click on the grid button, it opens all the Divs in the list, I need you to open only the div referring to that item. Some help?

<ion-list>
  <ion-item *ngFor="let item of itens">
    <ion-row>
      <ion-col col-9>
        <h3>{{item.nome}}</h3>
      </ion-col>
      <ion-col col-3>
        <h4>01/01/2019</h4>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-9>
        <p>Quantidade: {{item.quantidadeTotal}}</p>
        <button ion-button outline color="primary"
                icon-only (click)="detalhesItem(item)">
                Grades
                <ion-icon name="arrow-dropdown"></ion-icon>
        </button>
      </ion-col>
      <ion-col col-3></ion-col>
    </ion-row>
    <div *ngIf="mostraGrades">
      <ion-row *ngFor="let grade of item.grades">
        <ion-col col-8>
          <h6>{{grade.nomeComposto}}</h6>
        </ion-col>
        <ion-col col-2>
          <h6>{{grade.quantidade}}</h6>
        </ion-col>
        <ion-col col-2>
          <button ion-button small clear color="dark"
                  (click)="detalhesItemGrade(grade)">
                  Ver tudo
          </button>
        </ion-col>
      </ion-row>
    </div>
  </ion-item>
</ion-list>

Meu ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FirebaseListObservable, AngularFireDatabase } from 
         'angularfire2/database';


@IonicPage()
@Component({
   selector: 'page-itens',
   templateUrl: 'itens.html',
})
export class ItensPage {

itensFirebase: FirebaseListObservable<any[]>;
itens: Array<any>;
listaItens: Array<any>;
mostraGrades: any;

constructor(public navCtrl: NavController, 
            public navParams: NavParams,
            public db: AngularFireDatabase) {

            let pathItens = `/itens/`;
            this.itensFirebase = db.list(pathItens, {
              query: {
                 orderByChild: 'nome'
              }
            });

            this.itensFirebase.subscribe( data => {
               this.itens = data;
               this.listaItens = data;
            })
 }

 detalhesItem(item: any){
   this.mostraGrades = !this.mostraGrades;
 }

 novoItem(){
   this.navCtrl.push('CadastroItemPage');
 }

 detalhesItemGrade(grade: any){
   this.navCtrl.push('DetalhesItemGradePage', {gradeEscolhida: grade});
 }

 inicializarLista(): void {
   this.itens = this.listaItens;
 }

 buscarItens(searchbar) {
   this.inicializarLista();
   var q = searchbar.srcElement.value;
   if (!q) {
     return;
   }
   this.itens = this.itens.filter((c) => {
     if(c.nome && q) {

     if (c.nome.toLowerCase().indexOf(q.toLowerCase()) > -1) {
        return true;
     }
     return false;
   }
 });
}

}