Estoy tratando de hacer un cuadro de búsqueda, que busca nombres de productos y, como resultado, genera tarjetas de productos. Tengo un MenuComponent que tiene la entrada de búsqueda y busca los productos en la base de datos. (Se mantiene durante 300 ms, por lo que no tiene que realizar una solicitud para cada pulsación de tecla). getLikeName() devuelve productos que tienen lo que se busca en su nombre.
search(searchInput: string){ if(this.interval != null){ clearInterval(this.interval); } this.interval = setTimeout(() => { this.productHttpService.getLikeName(searchInput, 20).subscribe( (products: any[]) => this.productContainer.displayProducts(products) ); }, 300); } La función displayProducts actualiza la lista de productos. He registrado el resultado en console.log y efectivamente los productos están regresando. Sin embargo, la lista no se actualiza en el sitio web.
products: any[]; displayProducts(products: any[]){ this.products = products; console.log(products); }Este es el archivo HTML (estoy usando material angular):
<md-grid-list cols="4" rowHeight="1:2" class="size"> <md-grid-tile *ngFor="let product of products" class="separation"> <md-card class="example-card"> <md-card-header> <div md-card-avatar class="example-header-image"></div> <md-card-title>${{product.price}}</md-card-title> <md-card-subtitle>{{product.name}}</md-card-subtitle> </md-card-header> <img md-card-image [src]="product.imgUrl" style="width:300px; height:225px"> <md-card-content> <p> {{product.description}} </p> </md-card-content> <md-card-actions> <button md-button (click)="sidenav.open(); addToCart(product)">ADD TO CART</button> </md-card-actions> </md-card> </md-grid-tile> </md-grid-list>Gracias de antemano por su respuesta.
Del código de ejemplo, parece que el alcance de la variable 'productos' está limitado a 'this.productContainer' y no a 'this'. Entonces, el que se actualiza no es la variable 'productos' que está vinculada al HTML.
El archivo console.log seguirá funcionando mientras lo imprime desde el método displayProducts().
Sería más fácil si proporciona un plunker de su código.
Si el método de visualización no hace nada más que mostrar, le sugiero que cambie su código a lo siguiente:
this.interval = setTimeout(() => { this.productHttpService.getLikeName(searchInput, 20).subscribe( (products: any[]) => {this.products = products}); }, 300);Parece que los productos están ubicados en productContainer.products . . usar alcance dentro del html, así que cambie su html para leer *ngFor="let product of productContainer.products" .