Which object HashSet is deserialised into in TypeScript?

612 Views Asked by At

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)

0

There are 0 best solutions below