Si no les sale el el valor en su html… prueben pondiendo el codigo en el metodo getProductsByPage
Http Basic
Lo que aprenderás para consumir API con Angular
Solicitudes GET
Detalle de producto
Implementando slides
Solicitudes POST
Solicitudes PUT y PATCH
Solicitudes DELETE
Url Parameters / Paginación
Observable vs. Promesa
Reintentar una petición
Buenas prácticas
El problema de CORS
Manejo de ambientes
Manejo de errores
Transformar peticiones
Evitando el callback hell
Auth
Login y manejo de Auth
Manejo de headers
Uso de interceptores
Enviar Token con un interceptor
Creando un contexto a interceptor
Archivos
Descarga de archivos con Http
Subida de archivos con Http
Despedida
Continúa con el Curso de Angular Router y Programación Modular
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Nicolas Molina
Aportes 9
Preguntas 5
Si no les sale el el valor en su html… prueben pondiendo el codigo en el metodo getProductsByPage
Hay un error en esta clase en la parte de product?.taxes
lo que hace el ?
en product?
es validar si el objeto product
existe, entonces usa la propiedad .taxes
, por tanto product?.taxes
no va a generar ningun error.
Lo ideal seria usar el ??
de la siguiente forma: product.taxes ?? ''
es decir, si la propiedad es null
o undefined
coloca un string vacio.
en que momeno se puede usar el ?
?
Siguiendo este curso una opcion podria ser las imagenes. Si product.images
viene null o undefined ahi si aplica y querdaria asi: product.images?.length
recordar que en el componente products, en oninit cargamos los productos por medio del servicio getProductsByPage, por ende es en este servicio es donde debemos usar el map dentro del pipe para que este agregue el elemento taxes que en los productos queremos visualizar. ( el pipe en getAllProducts ya no se usa a este punto).
RxJS map() operator is a transformation operator used to transform the items emitted by an Observable by applying a function to each item.
Documentación
A veces puede ser necesario hacer transformaciones a la respuesta de una petición, para poner ejemplo agregar datos para complementar la información que entrega el backend.
RXJS .map()
→ Es un operador que permite tomar cada uno de los valores que lleguen en el observable y aplicarles una transformación.
// Obtener los productos desde la API
getProducts(limit?: number, offset?: number) {
...
return this.http.get<Product[]>(this.apiUrl, { params })
.pipe(
map(products => products.map(item => {
return {
...item,
taxes: .19 * item.price
}
}))
)
}
Luego en la vista del componente se podrÃa renderizar esta propiedad:
<p>Valor IVA: {{ product?.taxes | currency }}</p>
Creo que vi esta misma notacion cuando comence a trabajar y al fin puedo decir que la entiendo bien
el signo .? se llama Optional chaining (?.). pueden ver el curso de :
https://platzi.com/clases/1815-ecmascript-6/39727-ecmascript-2020-caracteristicas-importantes/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
El operador RxJS map() es un operador de transformación que se utiliza para transformar los elementos emitidos por un Observable aplicando una función a cada elemento.
Swal.fire({
title: 'Lo siento',
text: 'El producto ' + errorMsg,
icon: 'error',
confirmButtonText: 'OK'
});
console.log(errorMsg);
this.statusDetail = 'error';
});
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?