Error: InvalidPipeArgument: ‘[object Object]’ for pipe ‘SlicePipe’ utilizando DataView de PrimeNG en Angular.
El escenario por el cual se mostró el error fue el siguiente:
En nuestro componente, se agrega un Data View de PrimeNG para mostrar el contenido de una variable de tipo array. La variable se llama invoices.
<!-- Componente HTML -->
<p-dataView #dv [value]="invoices" [paginator]="true" [rows]="5" layout="list">
<ng-template let-invoices pTemplate="listItem">
<div class="p-col-12 bg-warning p-shadow-3 p-marg p-padd-10">
<div class="font-13"><b>Folio: {{invoices.DocNum}}</b></div>
<div class="font-13">Total: $ {{invoices.DocTotal | currency:'USD':''}} {{invoices.DocCur}}</div>
<div class="font-13">Fecha: {{invoices.DocDate}}</div>
</div>
</ng-template>
</p-dataView>// Componente TS
// declaramos nuestra variable publica donde se almacenara la información que recibiremos desde una web api.
public invoices: any [];
// fragmento de código donde se recibe la respuesta.
if (response) {
const objeto = JSON.parse(response.ObjectResult);
this.invoices = objeto.BOM.BO.OINV.row;
}Así tal cual esta el código funciona siempre y cuando la respuesta que se reciba sea un array de un objeto JSON.
La respuesta que nos envía la api es la que se muestra a continuación. Y solo interesa los datos que contiene el array «row».
{
"BOM":
{
"BO":
{
"AdmInfo":
{
"Object":"-1"
},
"OINV":
{
"row": [
{"DocEntry":"237386","DocNum":"234546","DocTotal":"3243.284000"},
{"DocEntry":"245227","DocNum":"242385","DocTotal":"1403.500000"},
{"DocEntry":"249691","DocNum":"246849","DocTotal":"2102.500000"}
]
}
}
}
}Con esta respuesta donde el contenido de «row» siempre sea un array no se tiene ningún problema, pero que pasa si la respuesta solo nos envía un solo dato en «row»:
"row": {
"DocEntry":"237386","DocNum":"234546","DocTotal":"3243.284000"
}
Entonces aquí es donde se presenta el problema, nuestro código, en el componente TS, recibe la respuesta correctamente sin mostrar ningún error pero al momento de que el Data View de PrimeNG recibe los datos en su atributo [value]=»invoices» nos arroja el error «Error: InvalidPipeArgument: ‘[object Object]’ for pipe ‘SlicePipe’«.
Después de minutos de revisar en Internet y consultar la documentación en PrimeNG. Data View requiere una colección de datos, y en el ejemplo donde la respuesta de la api solo nos muestra un solo dato en formato que no es un array se genera el error ya mencionado.
Para resolverlo, y debe de existir más formas de resolverlo, aquí les dejamos una con la cual se resolvió el problema.
if (response) {
const objeto = JSON.parse(response.ObjectResult);
if (objeto.BOM.BO.OINV.row.length > 0) {
this.invoices = objeto.BOM.BO.OINV.row;
}
else {
this.invoices = [0];
this.invoices[0] = objeto.BOM.BO.OINV.row;
}
}Referencia: PrimeNG y una cosita llamada la Internet.
Full Stack Web Developer && SDK SAPB1 Developer.
Melómano, Gamer (Xbox), Comprador compulsivo de Amazon y Posiblemente con TDAH.