Bonjour,

Je vais essayer d'exposer mon problème simplement. Je travaille actuellement sur le cours d'Angular que je trouve passionnant, j'essaie de modifier quelque peu le projet du cours et je bloque sur un problème qui doit se résoudre d'une manière très simple, mais malheureusement, je bute dessus depuis trop longtemps alors je vais vous l'exposer.

Dans le cours, on crée des livres, qu'on incorpore à la base de données Firebase et qu'on affiche ensuite dans le BookListComponent. Ce que je souhaiterais faire, c'est afficher uniquement les livres qui ont un auteur spécifique ou disons, les classer par auteur. J'ai bien réussi à créer le formulaire de création de nouveau livre et à le faire intéragir avec le serveur, mes items sont créés dans la base de données et sont affiché sur la view de mon component.

Voici le code du component:

le fichier .ts:

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit, OnDestroy {

  books: Book[];
  booksSubscription: Subscription;

  constructor(private booksService: BooksService, private router: Router) {}

  ngOnInit() {
    this.booksSubscription = this.booksService.booksSubject.subscribe(
      (books: Book[]) => {
        this.books = books;
      }
    );
    this.booksService.emitBooks();
  }

  onNewBook() {
    this.router.navigate(['/books', 'new']);
  }

  onDeleteBook(book: Book) {
    this.booksService.removeBook(book);
  }

  onViewBook(id: number) {
    this.router.navigate(['/books', 'view', id]);
  }
  
  ngOnDestroy() {
    this.booksSubscription.unsubscribe();
  }
}

Et la view html:

<div class="row">
  <div class="col-xs-12">
    <h2>Vos livres</h2>
    <div class="list-group">
      <button
        class="list-group-item"
        *ngFor="let book of books; let i = index"
        (click)="onViewBook(i)">
        <h3 class="list-group-item-heading">
          {{ book.title }}
          <button class="btn btn-default pull-right" (click)="onDeleteBook(book)">
            Supprimer ce livre
          </button>
        </h3>
        <p class="list-group-item-text">{{ book.author }}</p>
      </button>
    </div>
    <button class="btn btn-primary" (click)="onNewBook()">Nouveau livre</button>
  </div>
</div>

Ce code fonctionne parfaitement et m'affiche bien tous les livres qui sont contenus dans la BDD. Je pensais qu'en rajoutant avant ou après le *ngFor, un *ngIf = "book.author == 'Stephen King'" ou une syntaxe similaire, je pourrais n'afficher dans cette page que les livres dont l'auteur est Stephen King mais tout ce que je tente me renvoie vers une erreur, je perd la tête et j'ai l'impression de n'y rien comprendre...

J'ai également essayé de créer une fonction getAuthor() { return this.books.author; } pour ensuite appeler cette fonction dans mon *ngIf mais pareil, je me heurte à une erreur. Je me suis aussi dit que je n'avais possiblement même pas besoin d'un *ngIf mais que je pouvais mettre cette restriction dans le *ngFor mais je n'ai pas réussi à trouver la syntaxe adéquate...

Je ne sais même pas si ce que je demande est clair, si c'est le cas, j'en suis désolé, ça fait plusieurs jours que je planche sur ce cours et je commence à avoir la tête qui explose. Merci par avance à ceux qui prendront le temps de lire mon problème dont la solution est probablement enfantine pour un utilisateur aguerri d'Angular...

Emilien