-1

Preciso criar um filtro por categorias, então adicionei uma função nos botões que quando eu clico elas passam uma variável chamada categoria. O valor dessa variável está vindo certo, porém o filtro não está funcionando. Esse é o código que estou usando:

<ion-content>
  <div class="bg">
    <div class="align-books">
    <ion-col sizeLg="4.5" sizeMd="4" sizeXs="12" *ngFor="let book of books">
      <div *ngIf= "book.category == categoria"></div>
      <ion-card class="ion-text-center">
          <div class="blurry">
            <div class="front">
              <ion-grid>
                <ion-row class="ion-justify-content-center">
                    <ion-img [src]="book.image"></ion-img>
                </ion-row>
              </ion-grid>
            </div>
            <div class="back">
              <div class="back-container">
                <h1>{{ book.title }}</h1>
                <ion-text>
                  <p><strong>Autor</strong>: {{ book.autor }}</p>
                  <p><strong>Sinopse</strong>: {{ book.sin }}</p>
                  <a href= "{{ book.playlist }}" class="button-playlist" target="_blank">Clique para ir para a playlist!</a>
                </ion-text>
              </div>
              <ion-button class="button-edit" [routerDirection]="'root'" [routerLink]="['/update-book', book._id]" routerLinkActive="active">
                <ion-label><ion-icon name="pencil"></ion-icon></ion-label>
              </ion-button>
            </div>
          </div>

1 Resposta 1

0

Acredito que o problema seja onde está usando o *ngIf:

<div *ngIf= "book.category == categoria"></div>

Neste caso, a div em questão está sendo incluída no código, mas não faz nada. Para funcionar (acredito que esteja querendo mostrar o componente <ion-card> se book.category == categoria, certo?), basta passar o fechamento dessa para o final do componente, ou colocar o *ngIf dentro do próprio componente, assim:

  <ion-col sizeLg="4.5" sizeMd="4" sizeXs="12" *ngFor="let book of books">
    <ion-card class="ion-text-center" *ngIf= "book.category == categoria">
      <div class="blurry">
        <div class="front">
          <ion-grid>
            <ion-row class="ion-justify-content-center">
              <ion-img [src]="book.image"></ion-img>
            </ion-row>
          </ion-grid>
        </div>
        <div class="back">
          <div class="back-container">
            <h1>{{ book.title }}</h1>
            <ion-text>
              <p><strong>Autor</strong>: {{ book.autor }}</p>
              <p><strong>Sinopse</strong>: {{ book.sin }}</p>
              <a href= "{{ book.playlist }}" class="button-playlist" target="_blank">Clique para ir para a playlist!</a>
            </ion-text>
          </div>
          <ion-button class="button-edit" [routerDirection]="'root'" [routerLink]="['/update-book', book._id]" routerLinkActive="active">
            <ion-label><ion-icon name="pencil"></ion-icon></ion-label>
          </ion-button>
        </div>
      </div>
    </ion-card>
        ...
    </ion-col>

Espero ter ajudado :-)

1

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 .