ngFor em um Objeto complexo

Oi, André.

Você está acessando contrato ao invés de contratos como mostra no seu JSON. E também a variável que você acessa dentro do seu ngFor deve ser somente registro.id uma vez que as propriedades cliente.contratos de listContrato já foram acessadas.

<tr *ngFor="let registro of listContrato['cliente.contratos']">
            <td> {{ registro.id }} </td>

Caso você não tenha interesse no restante dos dados você pode acessar diretamente no seu componente também:

        res => this.listContrato = res.cliente.contratos;

<tr *ngFor="let registro of listContrato">
            <td> {{ registro.id }} </td>

Abs.

Flávio, quando coloco no component res.cliente.contratos o angular reclama informando "[ts] A propriedade 'cliente' não existe no tipo 'ContratoCobranca[]'."

porém minha interface está desta forma:

export interface ContratoCobranca{
    cliente: {
        id: number,
        cpf: string,
        nome: string,
        contratos: [{
            id: string,
            dataEmissao: Date,
            menorParcela: number,
            quantidadeParcelas: number,
            agente: {
                id: number
            },
            agenteResponsavel: {
                id: number
            },
            carteira: {
                id: number,
                nome: string,
                contratoOriginal: string
            },
            valorTotal: number,
            valorDivida: number,
            valorParcela: number,
            diasAtraso: number,
            descricao: string,
            menorDataVenvcimento: Date,
            dataUltimoPagamento: Date,
            quantidadeParcelaAtrasada: number,
            taxaContrato: number,
            acordos: [{
                status: {
                    descricao: string
                },
                valor: number,
                valorEntrada: number,
                valorDivida: number,
                quantidadeParcelasAcordo: number,
                valorTotalAcordo: number
            }]
        }],
        quantidadeContratos: number
    },
    status: string
}

O que estou fazendo de errado?

Ajustei como você me orientou e estava errado mesmo, porém continua não listando os contratos, o que me parece que não está reconhecendo o "cliente".

Obrigado.

E declarado também o array desta forma:

listContrato: ContratoCobranca[] = [];

Fico no aguardo, obrigado.

Oi, André. Não sou o Flávio, me chamo Darlan rs.

Bom, como o retorno do seu back-end é um array de ContratoCobranca a coisa muda um pouco de figura. O acesso as propriedades vai ficar por parte da variável registro que vai conter seu objeto, note que seu listContrato é um array de clientes, com vários objetos. Então de fato, listContratos.cliente.contratos não existe. Outro ponto, é que seu array de ContratoCobranca tem outro array de contratos. No seu template ficaria algo como:

<tr *ngFor="let registro of listContrato">
    <tr *ngFor="let reg of registro['cliente.contratos']">
            <td> {{ reg.id }} </td>

Dessa maneira deve funcionar, mas não fica legal, você passou a responsabilidade de inteirar seu array toda pro seu template.

Eu sugiro que você separe:

1 - Crie uma interface para seus registros de clientes:

export interface Registro = {
            id: string,
            dataEmissao: Date,
            menorParcela: number,
            quantidadeParcelas: number,
            agente: {
                id: number
            },
            agenteResponsavel: {
                id: number
            },
            carteira: {
                id: number,
                nome: string,
                contratoOriginal: string
            },
            valorTotal: number,
            valorDivida: number,
            valorParcela: number,
            diasAtraso: number,
            descricao: string,
            menorDataVenvcimento: Date,
            dataUltimoPagamento: Date,
            quantidadeParcelaAtrasada: number,
            taxaContrato: number,
            acordos: [{
                status: {
                    descricao: string
                },
                valor: number,
                valorEntrada: number,
                valorDivida: number,
                quantidadeParcelasAcordo: number,
                valorTotalAcordo: number
            }]
        }

export interface ContratoCobranca {
    cliente: {
        id: number,
        cpf: string,
        nome: string,
        contratos: Registro[],
        quantidadeContratos: number
    },
    status: string
}

2 - Crie uma variável para armazenar seus registros no componente:

//variavel
public registros: Registro[]: new Array<Registro>();

//codigo anterior
        result => {
            //chamada do back-end
              result.map(res => {
                res.cliente.contratos.map(r => {
                    //limpa o array de registros se houver algum
                    this.registros = new Array<Registro>();
                        this.registros.push(r);
                })
            })
        },

3 - Acesse direto no template.

<tr *ngFor="let registro of registros">
            <td> {{ registro.id }} </td>

Veja se dessa maneira funciona. Abs.