I got an ASP.NET Core .NET 5 Angular SPA.
The EF proxy class with navigation property:
public partial class Parent
...
public virtual HashSet<Child> Children { get; set; }
How do I "correctly" declare Children
property in TypeScript?
I tried array [] and Set but couldnt get it work.
interface Child {
id: number; ...
}
interface Parent {
id: number; ...
children: Child[];
}
the JSON in browser (regardles Set or array TS type) is same:
[{
"$id": "1",
"id": 1,
...
"parent": {
"$id": "3",
"$values": [{"$ref": "1"}]
}
},
"children": {
"$id": "4",
"$values": [{
"$id": "5",
"id": 1,
...
in HTML I try this:
<div *ngFor="let item of parents[0].children | keyvalue">
{{item.key}}:{{item.value}}
</div>
outputs:
$id:4
$values:[object Object]
But this one outputs nothing:
<div *ngFor="let item of parents[0].children[0] | keyvalue">
{{item.key}}:{{item.value}}
</div>
Sequentially the following outputs nothing too (this is actually why I am asking - how to get the children
property work):
<div *ngFor="let item of parents[0].children">
{{item.id}}:{{item.name}}
</div>
I mean this is pretty basic scenario. EF object with navigation property needs to be displayed in the UI. However I cant find what exactly needs to be done.
I would like a simple answer on - what is the correct type for navigation property children
in TypeScript should be?
Note: I have these $id, $values because I have to handle circular references in the EF classes
EDIT: once I try this.parents[0].children[0]
in Immediate window at run-time it says undefined
:
this.parents[0]
Object {$id: "1", id: 1,…}
$id: "1"
id: 1
...
children: Object {$id: "4", $values: Array(1)}
this.parents[0].children
Object {$id: "4", $values: Array(1)}
$id: "4"
$values: Array(1) [Object]
__proto__: Object {constructor: , __defineGetter__: , __defineSetter__: , …}
this.parents[0].children[0]
undefined
EDIT2: Once I introduced "fake" property children_ts: Child[]
which is on server side is simply Children_ts = Children.ToArray();
- everything started to work.. So I think its a bug and the front-end cannot work with references in JSON (eg $values
)