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
*ngForen 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 arrayelementscontiene objetos con propiedadestagytextque se utilizan para generar los elementos HTML.Para un caso de uso recursivo como la interfaz
ElementDescriptorproporcionada, se puede utilizar el mismo enfoque iterando sobre el array dechildrendentro de cada objeto y llamando recursivamente a la misma lógica de generación de HTML para cada elemento hijo.