In my scenario, I have two categories:
type ParentKeys = "mum" | "dad";
type ChildKeys = "alice" | "frank";
type Parents = {
[parentKey in ParentKeys]: {
children: {
[childKey in ChildKeys]: {
parent: parentKey;
key: childKey;
};
}[ChildKeys][];
};
};
This structure organizes the inner child objects { parent, key } into a tree-like format under their respective parents, accommodating all possible parent-child combinations. For an example, refer to this snippet:
const parents: Parents = {
mum: {
children: [
{ parent: "mum", key: "alice", },
],
},
dad: {
children: [
{ parent: "dad", key: "frank", },
{ parent: "dad", key: "alice", },
],
},
};
When utilizing the parents object within an Angular template,
<div *ngFor="let parent of parents | keyvalue">
<div *ngFor="let child of parent.value.children">
<div>child {{child.key}} of parent {{child.parent}}</div>
</div>
</div>
An error is raised:
Type
'(
{ parent: "mum"; key: "alice"; } |
{ parent: "mum"; key: "frank"; }
)[] |
(
{ parent: "dad"; key: "alice"; } |
{ parent: "dad"; key: "frank"; }
)[]'
is not assignable to type
'(
(
{ parent: "mum"; key: "alice"; } |
{ parent: "mum"; key: "frank"; }
)[] &
NgIterable<
{ parent: "mum"; key: "alice"; } |
{ parent: "mum"; key: "frank"; }
>
) | null | undefined'
.ngtsc(2322)
To circumvent this issue, one could resort to using $any(). However, it indicates a potential problem with either the types or the functionality of the KeyValuePipe.