显示array []类型的接口的值

Question

我正在组件中显示api数据。该组件看起来像这样：

HTML：

<div  *ngFor="let  customer of customers">
   <p>Name: {{customer?.name}}</p
   <p>Phone: {{customer?.phoneNumbers}}</p
</div>  

TS

import { Component,  Input } from '@angular/core';
import {  Customer } from '../models';

 @Component({
   selector: 'yn-contact',
    templateUrl: './contact.component.html',
    styleUrls: ['./contact.component.css'],
  })

 export class ContactComponent  {
     @Input()
     public customers: Customer ;
   }

在Customer文件中声明一个名为models.ts的接口，如下所示：

models.ts 文件

  export interface Customer {
     name: string;
     phoneNumbers: PhoneNumber[];
  }

  export interface PhoneNumber{
    type: string;
    displayName: string;
    number: string;
  }

现在，在 HTML 中，我可以显示name，但是在显示phone（即电话号码）时，我会像这样显示o / p ：

JSON：

  { 
    "salutation": "Dr",
    "jobTitle": "Nurse Practicioner",
    "name": "Adaline Danat",
    "birthDate": "1964-06-04T06:31:10Z",
    "gender": "Female",


   "phoneNumbers": [
       {
        "type": "Unknown",
        "displayName": "Mobile",
        "number": "+62 342 886 8201"
      },
      {
        "type": "Other",
        "displayName": "Home",
        "number": "+86 707 128 1882"
      },
      {
        "type": "Business",
        "displayName": "Home",
        "number": "+63 704 441 1937"
      },
    ],

   }

Answer 1

 <div *ngFor="let customer of customers">
     <p>Name: {{customer?.name}}</p>
       <ng-container *ngFor="let phn of customer?.phone">
         <p>Phone: {{phn.number}}</p>
        </ng-container>
   </div>  

只需使用内循环显示数字，如果要显示其他信息，可以执行{{phn.displayName}}

Answer 2

您需要使用电话对象的键(number)，如下所示-

{{customer?.phone[0]?.number}}

PS：出于视图目的的调试目的，您可以像这样在HTML中使用json管道-

{{customer?.phone | json}}