Error while displaying json in Angular 6

Question

I cannot view json list in html

I have json in the.ts component

ts component.

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'}
     ];
}

paylist-Cielo.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;"> &nbsp;</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>

Answer 1

The error was in the way json was called. I ran this way:

<tr role="row"  *ngFor="let clientes of cliente">
    <!-- NPU / CIV -->
    <td>{{clientes.nome}}</td>
    <td>{{clientes.Data}}</td>
    <td>{{clientes.TID}}</td>
    <td>{{clientes.Valor}}</td>
    <td>
      <!-- Acao -->
      <button>Cancelar Cielo</button>
    </td>
    <!-- CLIENTE(HOLDING) -->
</tr>

The format must respect the same in json.