javascript - 正确显示嵌套 Json

Question

我有一个 Angular 4 应用程序，我从端点获取 JSON 数据进行显示。

这是我的回复:

[
{
    "Pagamento": {
        "numeroCartao": "1111 2222 3333 4444",
        "valor": "123,52",
        "nome": "Bruno Vieira",
        "codigoSeguranca": "123",
        "quantidadeParcelas": 6,
        "validade": "11/2023"
    },
    "Configuracao": {
        "receberNovidades": true,
        "aceitaTermos": true
    },
    "Endereco": {
        "estado": "SP",
        "cidade": "São Paulo",
        "numero": "298",
        "logradouro": "Ailson Simoes",
        "cep": "04652228"
    },
    "cpf": "14540501609",
    "Atributos": {
        "masculino": true,
        "Tamanho": {
            "calcado": 38,
            "short": "GG",
            "camiseta": "GG"
        }
    },
    "id": "368b8057-d86f-7c18-d9da17b2ccfd",
    "Cliente": {
        "celular": "953688026",
        "nome": "Bruno",
        "apelido": "B",
        "sobrenome": "Vieira Campos",
        "email": "teste@gmail.com"
    }
}

]

这是我的服务:

export class ClientesService {
    constructor(private http: Http){}

    clientes(): Observable<Cliente[]>{
       return this.http.get(`URL`)
                       .map(response => response.json())
    }
}

客户模型

export interface Cliente {
id: string
nome: string
sobrenome: string
apelido: string
email: string
cpf: string
celular: string
dataNasc: string
cep: string
logradouro: string
numero: number
bairro: string
cidade: string
complemento: string
estado: string
preferencia: string
tamanhoCalcado: string
tamanhoCamisa: string
tamanhoTop: string
tamanhoCalcao: string

}

这是我的客户端组件(我在其中订阅来自 Observable 的事件)

export class ClientesComponent implements OnInit {

  @Input() clientes: Cliente[]

  constructor(private clientesService: ClientesService) { }

  ngOnInit() {
    this.clientesService.clientes()
      .subscribe(clientes => this.clientes = clientes)
  }

}

查看:

 <tr *ngFor="let cliente of clientes">
              <td>{{cliente.nome}}</td>
              <td>Costa</td>
</tr>              

我只能显示 CPF 属性，因为它位于文档的根目录中。例如，如何显示“Configuração”中的属性？我尝试了很多方法。

Answer 1

对于嵌套对象，您可以使用点符号链接(symbolic link)显示它们

"Pagamento": {
    "numeroCartao": "1111 2222 3333 4444",
    "valor": "123,52",
    "nome": "Bruno Vieira",
    "codigoSeguranca": "123",
    "quantidadeParcelas": 6,
    "validade": "11/2023"
},
"Configuracao": {
    "receberNovidades": true,
    "aceitaTermos": true
},
"Endereco": {
    "estado": "SP",
    "cidade": "São Paulo",
    "numero": "298",
    "logradouro": "Ailson Simoes",
    "cep": "04652228"
},

代码

<tr *ngFor="let cliente of clientes">
              <td>{{cliente.Pagamento.numeroCartao}}</td>
              <td>{{cliente.Pagamento.valor}}</td>

</tr>

像这样。