Uno de mis requisitos es cargar datos en la tabla Mat. Planeamos dos maneras, una de obtener el DOM como una cadena de la base de datos para representar en Angular y otra formando una matriz de objetos como una cadena de la base de datos y analizándola antes de representarla en la tabla usando JSON.parse y usándola como una matriz normal para representar MatTable. Aquí el problema es que contiene un evento de clic.
Al usar innerHTML: no es posible desencadenar un evento desde la cadena DOM de la base de datos. por lo tanto, debemos iterar manualmente el div y agregarle un detector de eventos después de la visualización. Elijo ngAfterViewChecked porque la paginación que estamos haciendo es del lado del servidor. por lo tanto, cada vez que obtengamos datos, agregaremos una cadena en innerHTML y le agregaremos eventlistener.
Mediante el uso de JSON.Parser: en este caso, obtendré los datos como una cadena en formato JSON, por lo que los repetiré antes de representarlos en HTML.
Cuál es mejor para el rendimiento. No tengo un código de muestra conmigo, por favor ayúdenme con esto.
Hubiera votado "ninguno" en este caso.
Angular es muy obstinado, lo que significa que hay buenas formas de hacer las cosas (lo que sea que funcione) y formas correctas de hacer las cosas (formas que aprovechan Angular de la forma en que debe usarse).
Sus componentes deben ser tan simples y tontos como sea posible, utilizando servicios para la mayor parte de su lógica y entrada/salida.
Entonces, recomiendo crear un servicio que sirva como llamada a la API, probablemente con un método como
getMyTableData() { // Whatever code to generate payload, if any return this.httpClient<MyExpectedDataType>('/api/myApiMethod', seeDocumentationForThisArgument); }donde el servidor responde con JSON y Angular lo extrae. Esta es la forma de hacerlo porque... ¡No lo sé! ¡No necesito hacerlo porque hay muchas cosas de las que preocuparme y no tengo que hacerlo porque está integrado en el marco para mí! Pero confío en que si hubiera una mejor manera de hacerlo, la habrían usado.
Beneficios adicionales:
debido a que está en un servicio en lugar de un componente, es más fácil de probar.
Gracias a la inyección de dependencia, al probar su componente, es fácil cambiar este servicio por una versión simulada del servicio.
Luego, el atributo de datos de su mat-table puede aceptar el observable devuelto por myService.getMyTableData() . No tendrás que analizar nada.