如何在Angular 6中顯示帶有更改字符串的嵌套JSON對象

Question

有一個非常棘手的問題要解決，不知道如何解決。 我在Angular 6中編碼。

對我來說，這是我的JSON文件。 我可以輕松訪問"id"或"certificate "id"類的數據，但是我想顯示票證上remainingCounts的嵌套的remainingCounts計數，這是下一個問題：在remainingCounts計數編號之前的ID始終與appointmentTypeIDs ID匹配。我告訴我的Angular Frontend總是顯示remainingCounts計數數組中所有隱藏的數據嗎？

[
   {
      "id":9073111,
      "certificate":"A4245322",
      "productID":425193,
      "appointmentTypeIDs":[
         5780379
      ],
      "remainingCounts":{
         "5780379":10
      }
   },
   {
      "id":9073113,
      "certificate":"0BE0C148",
      "productID":435370,
      "appointmentTypeIDs":[
         5780416
      ],
      "remainingCounts":{
         "5780416":50
      }
   },
   {
      "id":9073115,
      "certificate":"E72984C2",
      "productID":435376,
      "appointmentTypeIDs":[
         5780421
      ],
      "remainingCounts":{
         "5780421":100
      }
   }
]

我的證書：

export class CertificatesComponent implements OnInit {
  private certificates: Array<object> = [];
  pageTitle = 'Meine Zertifikate';
  email = this.auth.userProfile.name;

  constructor(
    private title: Title,
    private apiService: APIService,
    public auth: AuthService
  ) {}

  ngOnInit() {
    this.title.setTitle(this.pageTitle);
    this.getData();
  }

  public getData() {
    this.apiService
      .getCertificatesByUser(this.email)
      .subscribe((data: Array<object>) => {
        this.certificates = data;
        console.log(data);
      });
  }
}

我的任何HTML模板：

<div class="ui cards" *ngFor="let certificate of this.certificates">
      <div class="card">
        <div class="content">
          <div class="header">{{certificate.name}}</div>
          <div class="meta">{{certificate.email}}</div>
          <div class="description">
            Verbleibende Termine Ihrer {{certificate.name}}-Karte:
            <span *ngFor="let remainingCount of certificates.remainingCounts">
              {{remainingCount}}
            </span>
          </div>
        </div>
        <sui-progress class="bottom attached indicating active" [value]="80"></sui-progress>
      </div>
    </div>

Answer 1

首先， remainingCounts的counts不是根據您提供的JSON數據的數組。 這只是另一個對象。

您可以使用dot(.)運算符進行顯示，而無需ngFor即可ngFor其他屬性

<div class="ui cards" *ngFor="let certificate of this.certificates"> <div class="card"> <div class="content"> <div class="header">{{certificate.name}}</div> <div class="meta">{{certificate.email}}</div> <div class="description"> Verbleibende Termine Ihrer {{certificate.name}}-Karte:  {{certificate.remainingCount}}  </div> </div> <sui-progress class="bottom attached indicating active" [value]="80"></sui-progress> </div> </div>

STACKBLITZ演示