Estoy tratando de iterar a través de un objeto que recibo a través de una llamada de servicio y luego coloco esta iteración en una tabla usando * ngFor.
Sin embargo, recibo el siguiente error al intentar hacerlo.
Error trying to diff '[object Object]'. Only arrays and iterables are allowedEntiendo que no puede iterar a través de un Objeto, pero cuando estaba tratando de buscar una solución, no tenía mucho sentido para mí. Por favor, vea mi código a continuación, cualquier ayuda será muy apreciada:
.ts
searchValue: string = "3"; logList: any = []; getLogs() { const numOfLogs = new FormData(); numOfLogs.append('n_log', this.searchValue) this.fileUploadService.getLogs(numOfLogs).subscribe( data => {this.logList = data}, ); }html
<table class="table table-striped" style="width:1000px;table-layout:fixed;font-size:10px;color:black;"> <thead> <tr> <th>Name</th> <th>Date</th> <th>FilePath</th> <th>Updated</th> </tr> </thead> <tbody> <tr *ngFor="let item of logList"> <td>{{ item.Name}}</td> <td>{{ item.Date}}</td> <td>{{ item.FilePath}}</td> <td>{{ item.Updated}}</td> </tr> </tbody> </table>consola.log(this.logList)
{ "Name": [ "name1", "name2", "name3" ], "Date": [ "2021-12-13", "2021-12-12", "2021-12-11" ], "FilePath": [ "FileName1.xlsx", "FileName2.xlsx", "FileName3.xlsx", ], "Updated": [ "2021-12-31T00:00:00", "2021-12-31T00:00:00", "2021-12-31T00:00:00", ], }use keyValue pipe ya que loglist no es una matriz, el siguiente código resolverá su problema
<tbody> <tr> <td *ngFor="let item of logList | keyvalue"">{{ item.value}}</td> </tr> </tbody>*ngFor no te permite iterar Objetos. ¿Qué debe iterar, las claves del objeto o los valores?
Supongo que si corriste:
this.fileUploadService.getLogs(numOfLogs).subscribe( data => { console.log(typeof data); this.logList = data;}, );Registraría 'objeto'.
Si desea iterar un objeto en la plantilla, puede convertirlo en una matriz/iterable en el archivo .ts y usarlo en su lugar:
let iterableLogList = Object.keys(this.logList); o puede canalizar this.logList en la canalización de valor clave incorporada de keyvalue .
*ngFor="let item of logList | keyvalue" no debería necesitar importar nada nuevo para usar eso. Ahora, la clave de cada elemento estará disponible en la plantilla como item.key y, de la misma manera, el valor estará disponible como item.value .