0

En mi view tengo un input text con un boton filtrar y debajo muestro una lista llamada bookList$ de todos los productos. La idea es que en ese input se ingrese el id del producto para obtener de esa lista el producto correspondiente y se muestre en la view. De la forma que lo hice no da resultado.

aca mi componente.ts donde obtengo la lista y la funcion FilterBookById() que se ejecuta cuando el usuario pulsa el boton filtrar.

bookList$: Observable<Book[]>;
inputValue;

constructor(public bookService: BookService) { }

ngOnInit(): void {
  this.getBooksWithAuthorName();
}

getBooksWithAuthorName() {
   this.bookList$ = this.bookService.getBooksWithAuthorName(); 
}

filterBookById() {
  const id = parseInt(this.inputValue);
  return this.bookList$.pipe(
    map(
      items => items.filter(item => item.id_book === id)
    )
   );
}

aca la view component.html

<input type="text" class="form-control" name="search" placeholder="Search"
aria-label="Search"
[(ngModel)]="inputValue">

<button class="btn btn-outline-success mr-1" type="button" (click)="filterBookById()">Filtrar</button>


<div *ngIf="bookList$ | async as libros" class="card-body card-body-table">
    <h5>Lista de productos</h5>
    <table *ngIf="libros.length > 0" class="table table-striped">
        <thead>
            <tr>
                <th class="text-center">N°</th>
                <th class="text-center">Image</th>
                <th class="text-center">Nombre de libro</th>
                <th class="text-center">Autor</th>
                <th class="text-center">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let b of libros; index as i">
                <td class="text-center">{{ i + 1 }}</td>
                <td class="text-center"><img [src]="linkImg(b.url_image)"></td>
                <td class="text-center">{{ b.name }}</td>
                <td class="text-center">{{ b.autor }}</td>
                <td class="text-center">
                    <button class="btn btn-warning btn-sm mr-1"
                        routerLink]="['/editar-libro', b.id_book]">Editar</button>
                    <button class="btn btn-danger btn-sm">Eliminar</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

1 respuesta 1

0

Lo solucione de la siguiente manera:

A la variable bookList no la declaro como Observable, por consiguiente en todas las funciones tuve que susbcribirme.

inputValue;
 public bookList: Book[];
 constructor(public bookService: BookService){}

 ngOnInit(): void {
  this.getBooksWithAuthorName();
 }

 getBooksWithAuthorName() {
   this.inputValue = '';
   this.bookService.getBooksWithAuthorName()
     .subscribe(
       res => {
         this.bookList = res;
       }
     );
 }

 filterBookById() {
   const id = parseInt(this.inputValue);
   // Obtengo el producto filtrado por id
   const result = this.bookService.getBooksWithAuthorName()
   .pipe(
     map(item => item.filter(it => it.id_book === id))
   );

  // me susbcribo al array filtrado
   result.subscribe(
     res => {
    // en this.book guardo el resultado del filtrado
       this.bookList = res;
     },
   );
 }

y en la view component.html quite el pipe async

<input type="text" class="form-control" name="search" placeholder="Search"
aria-label="Search"
[(ngModel)]="inputValue">

<button class="btn btn-outline-success mr-1" type="button" (click)="filterBookById()">Filtrar</button>


<div *ngIf="bookList as libros" class="card-body card-body-table">
    <h5>Lista de productos</h5>
    <table *ngIf="libros.length > 0" class="table table-striped">
        <thead>
            <tr>
                <th class="text-center">N°</th>
                <th class="text-center">Image</th>
                <th class="text-center">Nombre de libro</th>
                <th class="text-center">Autor</th>
                <th class="text-center">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let b of libros; index as i">
                <td class="text-center">{{ i + 1 }}</td>
                <td class="text-center"><img [src]="linkImg(b.url_image)"></td>
                <td class="text-center">{{ b.name }}</td>
                <td class="text-center">{{ b.autor }}</td>
                <td class="text-center">
                    <button class="btn btn-warning btn-sm mr-1"
                        routerLink]="['/editar-libro', b.id_book]">Editar</button>
                    <button class="btn btn-danger btn-sm">Eliminar</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.