[英]How to access key values from array object in Angular with ngFor
Every time a module expansion panel is clicked, a HTTP call is made to the API to get all the companies available to the particular module. 每次单击模块扩展面板时,都会对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 response (available companies): 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" }
]
}
Inside each module expansion panel, I want to then display the available companies as a checklist. 在每个模块扩展面板中,我想将可用的公司显示为清单。 But I'm having trouble accessing the key values of the object and iterating for each checkbox.
但我无法访问对象的键值并迭代每个复选框。 Here's what I've tried so far:
这是我到目前为止所尝试的:
<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>
I think maybe I need to change how I'm using the keys pipe or the ngFor? 我想也许我需要改变我使用键管或ngFor的方式? Any help or ideas would be awesome, thanks :)
任何帮助或想法都会很棒,谢谢:)
Here's the list.component.ts: 这是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): 的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) keeps track of modules/verticals clicked. console.log(this.companies)跟踪单击的模块/垂直。 If two modules have been expanded (credit_cards and deposits), this.companies stores the module_names (keys) and the array of companies available each:
如果扩展了两个模块(credit_cards和deposit),this.companies存储module_names(键)和每个可用的公司数组:
[credit_cards: Array(3), deposits: Array(4)]
you are trying to use keyvalue
but with wrong syntax, 你试图使用
keyvalue
但语法错误,
you need use keyvalue
not as just keys
unless you have a custom pipe declaration. 除非您有自定义管道声明,否则您需要使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.