I can not display json list in html
I have json in component.ts
component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { BaseComponent } from '../../base.component'
import { Atividade } from '../../agenda/models/atividade';
import { CurrencyUtils } from '../../utils/currency-utils';
@Component({
selector: 'lista-pagamento-cielo',
templateUrl: './templates/lista-pagamento-cielo.html',
styleUrls: ['../../dashboard/styles/dashboard.css'],
providers: []
})
export class ListaPagamentoCielo extends BaseComponent {
constructor() { super() }
title = 'Tela Cancelamento Cielo';
cliente = [
{nome:'BC Advogados', Data:'01/01/1982',TID:'123123',Valor:'1200'}
];
}
pay-list-sky.html
<div class="portlet portlet-fit white" [ngBusy]="busy">
<div class="portlet-body">
<!-- <div class="row">
<div class="col-xs-8 text-right">
<span style="border-left:1px solid #eee;margin-left:2px;"> </span>
</div>
</div> -->
<span>{{title}}</span>
<span>{{cliente.nome}}</span>
<div class="table-scrollable">
<table class="table table-hover table-responsive" id="listaComprasCielo" role="grid" style="width:100%;">
<thead class="">
<tr role="row">
<th>Cliente</th>
<th>Data</th>
<th>TID</th>
<th>Valor da venda </th>
<th>Acao</th>
</tr>
</thead>
<tbody>
<tr role="row" *ngFor="let clientes of cliente">
<!-- NPU / CIV -->
<td>{{clientes.nome}}</td>
<td></td>
<td></td>
<td></td>
<td>
<!-- Acao -->
<button>Cancelar Cielo</button>
</td>
<!-- CLIENTE(HOLDING) -->
</tr>
</tbody>
</table>
</div>
</div>
</div>