typescript - Angular 6 Material Árbol Anidado no funciona con datos dinámicos

Estoy usando mat-tree con mat-nested-tree-node en Angular 6. Lo que quiero es cargar los datos dinámicamente cuando el usuario expande el icono.

Usando el ejemplo de datos dinámicos de Árbol Plano dado en Material Examples, he intentado usar el mismo concepto para Árbol Anidado. Esto es lo que he probado hasta ahora https://stackblitz.com/edit/angular-naarcp

Pero solo muestra los datos que fueron prellenados en el array de datos, aunque en la consola está claro que los datos se están actualizando, nunca se muestran en la interfaz de usuario.

Llama recursivamente al método _getChildren para los nodos parent, child1, child2, child3 porque estos son datos iniciales. Estoy agregando My Child en child1 y child3 cuando el usuario los expande, pero el nodo agregado nunca se muestra.

No puedo agregar hijos dinámicos en _getChildren porque se llama recursivamente hasta el último nodo.

Nota:

No quiero usar el árbol plano porque gestiona todo en un solo arreglo y actualizar el arreglo único se vuelve realmente difícil con la carga asíncrona de datos

Ayuda

¿Hay algo que me estoy perdiendo o los árboles anidados están diseñados para funcionar de esta manera?

Respuesta #1

Tuve dificultades cuando lo implementé cuando salió por primera vez y descubrí que la interfaz de usuario no se actualizaba porque los cambios en las propiedades de un objeto no son detectados por la detección de cambios. Por favor, lee mi pregunta y respuesta original aquí. Es para un árbol aplanado, pero podría ahorrarte horas de golpearte la cabeza.

¿Por qué mi aplicación Angular se está volviendo muy lenta después de cambiar los datos que respaldan un mat-tree?