1
resposta

Como popular meu modal com dados dinâmicos vindos da API

Aqui tenho os dados que a tela carrega corretamente

dados-lista.html

<h2>Lista de Carrinhos Abandonados</h2>

<table class="table table-striped">
    <tr>
        <th></th> 
        <th>Data</th>
        <th>Valor</th>
        <th>Itens</th>
        <th>Cód. Usuário</th>
        <th>Responsável</th>
        <th>Telefone</th>
        <th><a class="btn btn-success">Atualizar</a></th>
    </tr>
    <tr *ngFor="let dado of dados3; let i = index;">
        <td> 
            <button type="button" class="btn btn-default" 
                data-toggle="modal" data-target="#modalVerCarrinho"
                (click)="verCarrinho(dado, i)">
                ver carrinho
            </button>
        </td>
        <td>{{ dado.serverDate | date: 'dd/MM/yyyy'  }} {{ dado.serverTimePrettyFirstAction }}</td>
        <td>{{ dado.totalAbandonedCartsRevenue | currency:'BRL':true }}</td>
        <td>{{ dado.totalAbandonedCartsItems }}</td>
        <td>{{ dado.userId }}</td>
        <td>{{ dado.detail.dsResponsibleName | lowercase }}</td>
        <td>({{ dado.detail.nuPhoneDDD }}) {{ dado.detail.nuPhone | tel  }}</td>
        <td>            
            <button type="button" class="btn btn-danger" (click)="mudarFormato()">
                Ações
            </button>
        </td>
    </tr>
</table>

<modal-util 
[id]="'modalVerCarrinho'" 
[titulo]="'Ver Carrinho'"
[idUser]= "' dado.userId  '"
[descricao]="'Lista de carrinho'"
(onConfirm)="verCarrinho($event)">
</modal-util>

Código da modal-util-component.ts (que é onde pretendo jogar os dados que estão na API carregada em dados-lista-component.ts

import { DadosListaComponent } from './../dados/dados-lista-component';
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { provide } from '@angular/core/src/di/provider';

@Component({
    selector: 'modal-util',
    templateUrl: 'app/views/modals/modal-carrinho.html',
})
export class ModalUtilComponent implements OnInit{
    @Input() id: string;
    @Input() titulo: string;
    @Input() idUser: number;
    @Input() descricao: string;
    @Output() onConfirm: EventEmitter<boolean> = new EventEmitter<boolean>();

    confirmar() {
        this.onConfirm.emit(true);
    }
    ngOnInit(){
        console.log("init modal-util-component");
    }    
}

por fim a parte do código de dados-lista-component.ts que me retorna os dados no console, mas que não consigo jogar pra minha modal

verCarrinho(item: Dados): void{
        let detalheCarrinho = item.actionDetails.find(this.findCarrinhoAbandonado);
        console.log(detalheCarrinho);
    }
1 resposta

o seu modal esta fora do *ngFor neste contexto a variável "dado" não existe.