Angular2: Wie transformiere ich mein Baummodell auf eine andere Schnittstelle?

Angenommen, ich habe eine Mitarbeiterklasse, die ungefähr so ​​aussieht:

Angenommen, wir haben das erste Employee s, das ungefähr so ​​aussieht:

Wir können auch davon ausgehen, dass Mitarbeiter manchmal eingestellt oder entlassen werden. Etwas nach dem Motto:

Ich möchte Mitarbeiter in einem PrimeNg-Baum anzeigen.

Das Baumwidget erfordert, dass die anzuzeigenden Daten der treeNode-Schnittstelle entsprechen, die wie folgt aussieht:

Hauptfrage: Wie ändere ich die Daten am besten in TreeNodes, ohne meine Employee-Klasse zu ändern?

Dinge, über die ich nachdenke:

• Wenn ich einen neuen Mitarbeiter hinzufüge, möchte ich meinen Baumstatus beibehalten (was ist offen, was ausgewählt ist, usw.)
• Ich muss den Mitarbeiter, der gerade ausgewählt ist, einfach abrufen können.
• Ich versuche, zwei doppelte Modelle zu vermeiden.
• Ich möchte die Änderungserkennung von Angular2 auf vernünftige, aber skalierbare Weise nutzen

So sieht meine EmployeeTree-Komponente im Moment aus:

Option 1 - Erstellen Sie eine Pipe, mit der ein Mitarbeiter in TreeNode

Ich denke, das würde meine Vorlage wie folgt aussehen lassen:

Und ich würde eine Pipe erstellen, die so etwas macht:

Vor- / Nachteile:

• Dies nutzt die Winkeländerungserkennung
aus
• Wenn dies eine reine Pipe ist, kann es Änderungen übersehen
• Wenn das ein unreines Rohr ist, ist es vielleicht zu schwer
• Verlässt die Komponente sehr sauber und delegiert die Verantwortung an die Pipe
• Ich bin mir nicht sicher, ob dadurch mein GUI-Status erhalten bleibt (was ausgewählt ist und was geöffnet / geschlossen ist), wenn ein neues Element hinzugefügt wird

Option 2 - Innerhalb der Komponente pflegen Sie eine separate Struktur für die Struktur

Ich denke, dass ich den Mitarbeiter dazu bringen könnte, ein Ereignis auszulösen, das sich bei Änderungen ändert. Das könnte mir etwas einbringen.

Im Allgemeinen ist es am besten, Angular2 zu verwenden, um so etwas zu tun.

Zusammenfassend möchte ich ein Widget verwenden, das Daten in einem etwas anderen Format als dem erwartet, in dem ich es speichere. Was ist der Standard-angular2-Weg, um meine Daten in das Widget zu massieren? Gibt es spezielle angular2 Soße, die mir hier helfen? Sollte ich zwei getrennte Modelle pflegen? Möglicherweise könnte mein Baum 100 oder möglicherweise 1000 Stücke enthalten, so dass ich mich etwas mit der Leistung beschäftige.