1

Question I got a large nested array with several layer of nested children. The object I get back from API is flat, based on ParentId I can know the parent.

In my HTML I want to loop through every object and show it children.

Does any one have a freaky way to write createSelector and a way to select a state at every loop stage in the HTML, so that why I update a nested child, it does not re-render the whole HTML, but only re-render the object that was updated.

I've looked at Angular material table way of doing, trying to see if anyone else has a concept or a way of doing this.

App information:

  • Framework: Angular 5 universal
  • Statment mgmt: Ngrx
  • Backend: Node + swagger

My API call returns a large array with type of object:

{
  "id": "299999999"
  "parentId": "5ad4d",
  "body": "string",
  "type": "test"
}

Every object has a parentID, that lets know what child is below what child object.

I am storing everything in the list in my state. As you see the list has 3 nested children, but I may have nested children around 20 levels deep.

interface AppState {
  list: [
{
  "id": "299999999"
  "parentId": "5ad4d",
  "body": "string",
  "type": "test"
}
{
  "id": "2abc"
  "parentId": "299999999",
  "body": "string",
  "type": "test"
}
{
  "id": "2abcd"
  "parentId": "299999999",
  "body": "string",
  "type": "test"
}
{
  "id": "2abcde"
  "parentId": "299999999",
  "body": "string",
  "type": "test"
}
{
  "id": "2abcde"
  "parentId": "6dda4",
  "body": "string",
  "type": "test"
}
{
  "id": "2abcdefg"
  "parentId": "2abcde",
  "body": "string",
  "type": "test"
}
{
  "id": "23sadasd"
  "parentId": "2abcde",
  "body": "string",
  "type": "test"
}
{
  "id": "12asdasd"
  "parentId": "2abcde",
  "body": "string",
  "type": "test"
}
];
}
Chris Tarasovs
  • 703
  • 2
  • 21
  • 54

1 Answers1

2

If you do not want to re-render the whole list (which is a good thing), you don't have a lot of choice.

Trying to have a memoized selector is a good way but it's not enough.

The first thing you should do is define the trackBy function within your ngFor loop. The trackBy function will take an object as param and you should return something to identify this resource in a unique way, for example by returning it's ID.

Like that, Angular will not re-render the whole list.

I've made an explanation how to make sure it's not re-rendered here: https://stackoverflow.com/a/42246895/2398593

maxime1992
  • 22,502
  • 10
  • 80
  • 121