After calling a Spring service, I am receiving JSON data which is stored in the "etapaData" variable.
0:
id: 266
aplicacao: {id: 192, nome: "Sistema de Cadastro", checked: false}
erro: {id: 220, nome: "Falta de orçamento", checked: false}
perfil: {id: 8, nome: "Usuario", checked: false}
checked: true
ordem: 1
tarefas: [{…}]
__proto__: Object
1:
id: 267
aplicacao: {id: 204, nome: "Sistema Financeiro", checked: false}
erro: {id: 237, nome: "Número de licenças excedidas", checked: false}
perfil: {id: 188, nome: "Administrador", checked: false}
checked: true
ordem: 2
tarefas: [{…}]
__proto__: Object
2:
id: 269
aplicacao: {id: 204, nome: "Sistema Financeiro", checked: false}
erro: {id: 221, nome: "Nullpointer Exception", checked: false}
perfil: {id: 10, nome: "N2", checked: false}
checked: true
ordem: 3
tarefas: (2) [{…}, {…}]
__proto__: Object
length: 3
When rendering this JSON in HTML, the "ordem" value is not loading correctly. All three elements are being displayed with the value "3", instead of "1", "2" and "3":
https://i.sstatic.net/fWYBS.png
The expected values should be "1," "2," and "3."
This snippet shows the relevant HTML code:
<div class="container" style="padding-left: 60px;">
<div class="panel panel-default">
<div class="panel-heading">
<h1>Atualizar Workflow</h1>
<div [hidden]="submitted">
<form (ngSubmit)="onSubmit()">
<h4>Nome</h4>
<div class="input-field col s6">
<input placeholder="Digite o nome do Workflow" type="text" class="form-control" id="nome" required [(ngModel)]="workflow.nome"
name="nome">
</div>
<h4>Etapas</h4>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Check</th>
<th>Aplicação</th>
<th>Erro</th>
<th>Time</th>
<th>Tarefas</th>
<th>Ordem</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let etapa of etapaData">
<td><input type='checkbox' id="etapa{{etapa.id}}" [checked]="etapa.checked" class="valign-wrapper"><label
class="valign-wrapper" for="etapa{{etapa.id}}"></label></td>
<td>{{etapa.aplicacao.nome}}</td>
<td>{{etapa.erro.nome}}</td>
<td>{{etapa.perfil.nome}}</td>
<div *ngFor="let tarefa of etapa.tarefas">{{tarefa.nome}}</div>
<td><label for="ordem"></label>
<input placeholder="Ordem da etapa no Workflow" type="text" class="form-control" id="ordem{{etapa.id}}" required
[(ngModel)]="etapa.ordem" name="etapa.ordem"></td>
</tr>
</tbody>
</table>
<div class="input-field">
<button type="submit" class="btn btn-success">Submit<i
class="material-icons right">send</i></button>
</div>
</form>
</div>
<div class="alert alert-success" role="alert" [hidden]="!submitted">
<h4>Registro submetido com sucesso!</h4>
</div>
</div>
</div>
</div>
Is there something wrong with my implementation?