如何使用ngFor從Angular中的數組對象訪問鍵值

Question

每次單擊模塊擴展面板時，都會對API進行HTTP調用，以使特定模塊可以使用所有公司。

  <mat-accordion *ngIf="modules">
    <mat-expansion-panel *ngFor="let module of modules">
      <mat-expansion-panel-header (click)="availableCompanies(module.module_name)">
        <mat-panel-title>
          {{module.module_name}}
        </mat-panel-title>
      </mat-expansion-panel-header>

HTTP響應（可用公司）：

{
  "message": "Retrieved companies available to module",
  "data": [
    { "co_code": "123", "name": "Company A" },
    { "co_code": "456", "name": "Company B" },
    { "co_code": "789", "name": "Company C" }
  ]
}

我的問題：

在每個模塊擴展面板中，我想將可用的公司顯示為清單。 但我無法訪問對象的鍵值並迭代每個復選框。 這是我到目前為止所嘗試的：

      <mat-list dense>
        <mat-list-item *ngFor="let vertical of companies | keys">
          <mat-checkbox *ngFor="let company of companies[vertical]">
            {{company.name}}
          </mat-checkbox>
        </mat-list-item>
      </mat-list>

我想也許我需要改變我使用鍵管或ngFor的方式？ 任何幫助或想法都會很棒，謝謝:)

額外的信息：

這是list.component.ts：

export class listComponent implements OnInit {
  @Input() modules: Module[];
  @Input() companies: Company[] = [];

  constructor(
    private rs: RecipientService, // has getAvailableCompanies http method
  ) { }

  ngOnInit() {
  }

  availableCompanies(vertical: string) {
   this.rs.getAvailableCompanies(this.recipient.email_address, vertical).subscribe(res => {
     this.companies[vertical] = res;
     console.log(res);
     console.log(this.companies);
   });
  }

}

的console.log（RES）：

(3) [
     { "co_code": "123", "name": "Company A" }, 
     { "co_code": "456", "name": "Company B" }, 
     { "co_code": "789", "name": "Company C" }
    ]

console.log（this.companies）跟蹤單擊的模塊/垂直。 如果擴展了兩個模塊（credit_cards和deposit），this.companies存儲module_names（鍵）和每個可用的公司數組：

[credit_cards: Array(3), deposits: Array(4)]

Answer 1

你試圖使用keyvalue但語法錯誤，

除非您有自定義管道聲明，否則您需要使用keyvalue而不僅僅是keys 。

<mat-list dense>
     <mat-list-item *ngFor="let vertical of companies | keyvalue">
         <mat-checkbox *ngFor="let company of companies[vertical]">
            {{company.name}}
         </mat-checkbox>
     </mat-list-item>
 </mat-list>