How to change class from ngFor

hello guys, how are I wanting to change the class here when I do ngFor, but I’m pulling my data from a json, could you help me with this question?

in HTML:

    <ion-list class="ion-listing">
      <ion-item no-lines *ngFor="let b of browsers">
        <ion-thumbnail item-start>
        <span class="spriteIconBrowser chrome"></span>
        </ion-thumbnail>
        <h2>Navegador: {{b.name}} </h2>
        <p>Ultima sessão ativa em: {{b.date}}</p>
        <button ion-button clear item-end (click)="presentAlert()"><ion-icon ios="ios-add-circle" md="md-add-circle"></ion-icon></button>
      </ion-item>

SCSS:

.spriteIconBrowser{
    background-image: url(../../assets/img/spritesBrowserIcon.png);
    height:40px;
    width:40px;
    display: inline-block;
    margin-top:8px;
  }

  .spriteIconBrowser.chrome{
    background-position: 0 0;
  }

  .spriteIconBrowser.firefox{
    background-position: 120px 0;
  }

  .spriteIconBrowser.edge{
    background-position: 160px 0;

  }

  .spriteIconBrowser.opera{
    background-position: 80px 0;
  }

  .spriteIconBrowser.safari{
    background-position: 40px 0;

  }

JSON:

{
  "browsers": [ {
    "id": "1",
    "name": "Chrome",
    "date": "20 de Junho 2021 - 14:00"
  },
  {
    "id": "2",
    "name": "Firefox",
    "date": "15 de Janeiro 2021 - 21:00"
  },
  {
    "id": "3",
    "name": "Safari",
    "date": "05 de Dezembro 2020 - 15:32"
  },
  {
    "id": "4",
    "name": "Opera",
    "date": "07 de Março 2021 - 14:21"
  },
  {
    "id": "5",
    "name": "Edge",
    "date": "25 de Junho 2021"
  }]
}

TS01:

  getBrowsers() {
      return new Promise((resolve, reject) => {
        this.http.get(this.browsers).subscribe( (data: any) => {
            console.log(data.browsers)
             resolve(data.browsers);
        },
        (err) => {
            alert('Falha ao carregar o json');
        });
      });
  }

TS02:

    this.qrCodeProvide.getBrowsers().then((data: any)=>{
      data.map((name) => {
        console.log(name)
      })
      console.log(data, 'ok');
      this.browsers = data;
    });

2 posts - 2 participants

Read full topic