组件初始化前的角度加载异步数据

Question

我在使用API调用中的数据时遇到问题：我想使用检索到的数据来设置复选框中的复选框，但组件在API响应之前初始化，我得到了一些控制台错误：

错误类型错误：无法读取未定义的属性"id">

我也用解析器测试了行为，但我也有同样的问题，即使在初始化之前记录了响应数组：

组件.ts

...
export class RolesComponent implements OnInit {
flag: boolean = false;
simpleArr: object[] = [
{ userId: 1, id: 2 },
{ userId: 1, id: 3 },
{ userId: 1, id: 5 },
{ userId: 1, id: 7 }
]
permArr: object[] = [];
permArrResolved: object[] = [];
levels = [
{ name: 0, description: 'Creazione nuovo utente' },
{ name: 1, description: 'Reset password di qualsiasi utente' },
{ name: 2, description: 'Eliminazione di qualsiasi utente' },
{ name: 3, description: 'Modifica livello di qualsiasi utente' },
{ name: 4, description: 'Rinnovo delle licenze' },
{ name: 5, description: 'Gestione completa delle licenze' },
{ name: 6, description: 'Gestione completa dei clienti' },
{ name: 7, description: 'Gestione completa dei PC' }
];
constructor(private api: RolesApiService, private route: ActivatedRoute, ) {
this.api.getKeys().subscribe(keys => {
this.permArr = keys;
console.log(this.permArr);
this.flag = true
});
this.route.data.pipe(
map(data => data.cres)).subscribe((key) => {
this.permArrResolved = key;
console.log(this.permArrResolved);
});
}
ngOnInit() {
console.log('component is initialized');
}
}

component.html

<form *ngIf="flag">
<h2>with permArr[0].id</h2>
<ng-container *ngFor="let level of levels">
<input type="checkbox" [checked]="level.name === permArr[0]?.id" />{{level.name}} - {{level.description}}
<br>
</ng-container>
<hr>
<h2>with simpleArr[level.name].id</h2>
<ng-container *ngFor="let level of levels">
<input type="checkbox" [checked]="level.name === simpleArr[level.name]?.id" />{{level.name}} - {{level.description}}
<br>
</ng-container>
<hr>
<h2>with permArr[level.name].id</h2>
<ng-container *ngFor="let level of levels">
<input type="checkbox" [checked]="level.name == permArr[level.name]?.id" />{{level.name}} - {{level.description}}
<br>
</ng-container>
<hr>
<h2>with permArr[level.name].id using resolver</h2>
<ng-container *ngFor="let level of levels">
<input type="checkbox" [checked]="level.name == permArrResolved[level.name]?.id" />{{level.name}} - {{level.description}}
<br>
</ng-container>
</form>

我做了一个stackblitz演示来展示错误、api服务、路由和我使用的解析器。在这里：https://stackblitz.com/edit/async-angular-resolver

我该如何解决这个问题？

编辑：使用安全操作程序不能解决错误EDIT2：使用*ngIf in form标记不能解决错误

Answer 1

这里已经有几个答案正确回答了您提出的问题-它们不适用于您的原因是您绑定的数据与您的ID不匹配。

你之前的问题基本上都在问同一件事：

• angular嵌套ngfo标签与ngif检查材料数据绑定异步问题
• 角度材质绑定属性不起作用无法绑定到选中的ngif

为了防止社区进一步浪费精力，我已经着手编写您应该自己编写的调试代码。这显示了安全导航操作员如何修复模板问题，正如一些人已经建议的那样-用*ngIf包装也可以解决问题，我添加的值显示了为什么没有选中勾选框。

https://stackblitz.com/edit/async-angular-resolver-hxxyw4?file=src/app/roles/roles.component.html

Answer 2

您可以使用安全导航运算符：?.

Angular安全导航操作符(？.(是一种流畅方便的方法，可以防止属性路径中的null和未定义值。

例如：

[checked]="level.name === permArr[0]?.id"

这基本上等同于permArr[0] && permArr[0].id

Answer 3

使用*ngIf:响应后的加载视图

<form *ngIf="flagpermArr && flagpermpermArrResolved">
<h2>with permArr[0].id</h2>
<ng-container *ngFor="let level of levels">
<input type="checkbox" [checked]="level.name === permArr[0]?.id" />{{level.name}} - {{level.description}}
<br>
</ng-container>
<hr>
<h2>with simpleArr[level.name].id</h2>
<ng-container *ngFor="let level of levels ; let i = index">
<!-- <input *ngIf="" type="checkbox" [checked]="level.name === simpleArr[level.name].id" />{{level.name}} - {{level.description}} 
-->
<br>
</ng-container> 
<hr>
<h2>with permArr[level.name].id</h2>
<ng-container *ngFor="let level of levels">
<input type="checkbox" [checked]="level.name == permArr[level.name]?.id" />{{level.name}} - {{level.description}}
<br>
</ng-container>
<hr>
<h2>with permArr[level.name].id using resolver</h2>
<ng-container *ngFor="let level of levels">
<input type="checkbox" [checked]="level.name == permArrResolved[level.name]?.id" />{{level.name}} - {{level.description}}
<br>
</ng-container>
</form>

TS:

export class RolesComponent implements OnInit {
flagpermArr: boolean = false;
flagpermpermArrResolved: boolean = false;
simpleArr: object[] = [
{ userId: 1, id: 1 },
{ userId: 1, id: 2 },
{ userId: 1, id: 5 },
{ userId: 1, id: 7 }
]
permArr: object[] = [];
permArrResolved: object[] = [];
levels = [
{ name: 0, description: 'Creazione nuovo utente' },
{ name: 1, description: 'Reset password di qualsiasi utente' },
{ name: 2, description: 'Eliminazione di qualsiasi utente' },
{ name: 3, description: 'Modifica livello di qualsiasi utente' },
{ name: 4, description: 'Rinnovo delle licenze' },
{ name: 5, description: 'Gestione completa delle licenze' },
{ name: 6, description: 'Gestione completa dei clienti' },
{ name: 7, description: 'Gestione completa dei PC' }
];
constructor(private api: RolesApiService, private route: ActivatedRoute, ) {
}
ngOnInit() {
this.api.getKeys().subscribe(keys => {
this.permArr = keys;
this.flagpermArr = true
});
this.route.data.pipe(
map(data => data.cres)).subscribe((key) => {
this.permArrResolved = key;
this.flagpermpermArrResolved = true
});
}

Answer 4

您可以使用：

<ng-container *ngIf="permArr && permArrResolved"> your code here </ng-container>

只有当permArr和perArrResolved中有数据时，才会呈现容器内容。