1

Estou tentando executar um loop para mostrar os valores, respectivamente para cada usuário, porém com ngIf não aparece nada, como coloco aqui no exemplo, e sem o ngIf são mostrados os dois valores para os dois usuários, sendo que cada usuário tem somente um valor.

users = [
  {'id': 15,'name':'João'},
  {'id': 16,'name':'Maria'}
];
listPrices = [
  {'id_price': 1,'id_user': 15,'price': 2.50},
  {'id_price': 3,'id_user': 16,'price': 1.50}
];
<div *ngFor="let user of users">
  <div *ngFor="let item of listPrices">
    <span *ngIf="item.id_user === data.id">
      {{item.price}}
    </span>
  </div>
</div>

3
  • 3
    Nesse caso, não seria apenas um erro de sintaxe, de data.id para user.id Commented 27/02/2019 às 1:07
  • 1
    Cara era mais fácil vc fazer um mapeamento no seu typescript. Commented 27/02/2019 às 14:42
  • Por que não seria o problema de sintaxe? Acho que é isso mesmo. O ideal seria ele fazer um map na controller e gerar um objeto único pra dar apenas um ngFor, mas dessa forma no template funciona também. Commented 27/02/2019 às 16:37

1 Resposta 1

1

Se o seu código estiver exatamente como o colocado na pergunta,há um pequeno erro no ngIf. Você chama data.id quando na verdade é user.id o correto.

users = [
  {'id': 15,'name':'João'},
  {'id': 16,'name':'Maria'}
];
listPrices = [
  {'id_price': 1,'id_user': 15,'price': 2.50},
  {'id_price': 3,'id_user': 16,'price': 1.50}
];
<div *ngFor="let user of users">
  <div *ngFor="let item of listPrices">
    <span *ngIf="item.id_user === user.id">
      {{item.price}}
    </span>
  </div>
</div>

Você pode fazer também na sua controller um tratamento nesses objetos e obter um para utilizar no template. Ficaria algo mais ou menos assim:

userTemplate = users.map(user => {
    user.prices = listPrices.filter(list => user.id === list.id_user)
    return user
})

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .