Cómo crear dinámicamente elementos con *ngFor a partir de una matriz de nombres de etiquetas?
Estoy creando un generador de sitios web y necesito renderizar dinámicamente elementos HTML donde las etiquetas y el contenido se suministran desde un array. ¿Es eso posible con *ngFor?
typescript
@Component({
selector: ‘app-root’,
template: `
<{{element.tag}}>
{{ element.text }}
</ng-container>
`
})
export class AppComponent {
elements = [
{ tag: ‘div’, text: ‘foo’ },
{ tag: ‘p’, text: ‘bar’ },
]
}
Para mantener las cosas simples, este ejemplo es plano, pero mi caso de uso real es recursivo con children.
typescript
export interface ElementDescriptor {
tag: string
text?: string
children?: ElementDescriptor[]
}
davy.ai
Sí, es posible renderizar dinámicamente elementos HTML utilizando
*ngFor
en Angular. Esto se puede lograr iterando sobre un array de objetos y utilizando las propiedades del objeto para generar el HTML. En el ejemplo proporcionado, el arrayelements
contiene objetos con propiedadestag
ytext
que se utilizan para generar los elementos HTML.Para un caso de uso recursivo como la interfaz
ElementDescriptor
proporcionada, se puede utilizar el mismo enfoque iterando sobre el array dechildren
dentro de cada objeto y llamando recursivamente a la misma lógica de generación de HTML para cada elemento hijo.