html，用于循环通过angular8中的嵌套接口

Question

我正在使用Angular 8并从服务器接收响应

{
"status": 0,
"object": [  
{
"id": 1,
"label": "creditcard",
"image_url": "https://example.com/creditcard.png"
},
{
"id": 2,
"label": "Bank Transfer",
"account_id": 6,
"image_url": "https://example.com/bank.png"
}
]
}

我定义了一个界面，然后显示：

export interface Details {
id: number;
label: string;
image_url:string;
}
export interface Provider{
status: number;
object:  Details[];
}

组件的TS为：

export class ProviderComponent implements OnInit {
myProviders : Provider;

constructor( private client: HttpClient,
private changeDetector: ChangeDetectorRef,
private injector: Injector) { }
ngOnInit() : void {
this.client.get<Provider>('rest/provider').subscribe( (data: ProviderDto) => this.myProviders = {...data});
}
}

现在我的问题是，我如何循环myProviders.object，以便显示一个单选按钮组，该组首先显示"；信用卡"；然后"；银行转账"；作为选项？例如，当我使用时

<mat-radio-group
aria-labelledby="provider-radio-group-label"
class="provider-radio-group" >
<mat-radio-button class="provider-radio-button" *ngFor="let payerType of myProviders.object;" >
{{payerType.label}}
<br>
<img
[src]="payerType.image_url"
alt="{{ payerType.label }}"
class="img-responsive"
style="max-height: 80px;">
<hr>
</mat-radio-button>
</mat-radio-group>

它确实有效，但它在chrome控制台中抛出一个错误，即Typeerror:无法读取未定义的属性"object"我想这个错误是有道理的，因为*ngFor正在寻找一个数组；对象"；是一个包含多个元素/变量的数组。如何循环遍历元素而不出现任何错误？

Answer 1

在myProviders被分配异步请求的响应之前抛出错误。您可以在此处使用安全导航运算符?.来检查变量是否已定义，然后再尝试访问其属性。

尝试以下

<mat-radio-group
aria-labelledby="provider-radio-group-label"
class="provider-radio-group" >
<mat-radio-button class="provider-radio-button" *ngFor="let payerType of myProviders?.object" >
{{payerType?.label}}
<br>
<img
[src]="payerType?.image_url"
alt="{{ payerType?.label }}"
class="img-responsive"
style="max-height: 80px;">
<hr>
</mat-radio-button>
</mat-radio-group>

请注意，myProviders.object已替换为myProviders?.object。

更新：async管道

您可以尝试在模板中使用async管道，而不是在组件中进行订阅。它还可以处理潜在的内存泄漏。

组件

import { Observable } from 'rxjs';
export class ProviderComponent implements OnInit {
myProviders : Observable<ProviderDto>;      // <-- typeof `Observable`
ngOnInit() : void {
this.myProviders = this.this.client.get<Provider>('rest/provider');     // <-- no subscription
}
}

模板

<ng-container *ngIf="(myProviders | async) as providers">
{{ providers | json }}      <!-- check the output here and remove it later -->
<mat-radio-group
aria-labelledby="provider-radio-group-label"
class="provider-radio-group" >
<mat-radio-button class="provider-radio-button" *ngFor="let payerType of providers?.object;" >
{{payerType?.label}}
<br>
<img
[src]="payerType?.image_url"
alt="{{ payerType?.label }}"
class="img-responsive"
style="max-height: 80px;">
<hr>
</mat-radio-button>
</mat-radio-group>
</ng-container>