Estoy tratando de crear una tabla donde la entrada es un objeto Tipo. Logré devolver los datos en la tabla, sin embargo, actualmente hay dos problemas:
Entiendo que debería usar alguna lógica de mapeo, sin embargo, parece que no puedo entender eso. Cualquier ayuda será muy apreciada, gracias
.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> <td *ngFor="let item of logList | keyvalue"">{{ item.value}}</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", ], }Le estás diciendo que se repita sobre cada tecla, así que:
<td *ngFor="let item of logList | keyvalue">{{ item.value}}</td>Se convertiría:
<tr> <td>{{ logList.Name }}</td> <td>{{ logList.Date }}</td> <td>{{ logList.FilePath }}</td> <td>{{ logList.Updated }}</td> </tr>Que luego sería interpolado como:
<tr> <td>name1,name2,name3</td> <td>...etc</td> </tr>Supongo que lo que quieres es:
<tr> <td>name1</td> <td>2021-12-13</td> <td>FileName1.xlsx</td> <td>2021-12-31T00:00:00</td> </tr> <tr> <td>name2</td> <td>2021-12-12</td> <td>FileName2.xlsx</td> <td>2021-12-31T00:00:00</td> </tr> ...etcLo más fácil sería analizar sus datos en un tipo diferente. Entonces sus datos se verían así
[ { "Name": "name1", "Date": "2021-12-13", "FilePath": "FileName1.xlsx", "Updated": "2021-12-31T00:00:00", }, ... ]Entonces tu html se vería así:
<tr *ngFor="log in logList"> <!-- notice the ngFor is now on the row --> <td>{{ log.Name }}</td> <td>{{ log.Date }}</td> <td>{{ log.FilePath }}</td> <td>{{ log.Updated }}</td> </tr>Si no puede modificar los datos que regresan para que se vean así, tendrá que analizarlos por su cuenta:
... this.fileUploadService.getLogs(numOfLogs).subscribe(data => { this.logList = []; for(var x = 0; x < data.Name.length; x++){ this.logList.push({ Name: data.Name[x], Date: data.Date[x], FilePath: data.FilePath[x], Updated: data.Updated[x], }); } });