0
192
VistasImprima una matriz desde una función dentro de Angular HTML
Estoy haciendo una aplicación donde imprimo algunos autos (los recibo de la base de datos) y en una columna tengo una cadena con múltiples etiquetas que están divididas por comas, hice una función para recibir eso como una matriz de palabras y luego imprima cada palabra para crear etiquetas, pero realmente no sé cómo llamar a la función o cómo hacerlo porque se repite varias veces cuando no debería hacerlo.
<!-- Category Card --> <div *ngFor="let car of cars" class="col-md-4"> <div class="card-image-overlay m-auto" id="tags"> {{separar(car?.tags)}} </div> </div>Luego el código de la función "separar":
public separar(string) { var palabras = []; palabras = string.split(","); for (var i = 0 ; i < palabras.length ; i++) { document.getElementById("tags").innerHTML += ("<span class='card-detail-badge'>" + palabras[i] + "</span>"); } }Estoy recibiendo esto:
y solo debe imprimir 3 veces esas etiquetas.
Probablemente sea un error muy fácil, pero soy nuevo en angular y mi maestro no sabe por qué no funciona. :(
2 Respuestas
Responde la pregunta0
Intente devolver la cadena HTML de la función de plantilla en su lugar.
Además, evite las palabras comunes (a veces "reservadas") para las variables, es decir, use tagListStr en lugar de string .
public separar(tagListStr) { return tagListStr .split(",") .map(tag => `<span class='card-detail-badge'>${tag}</span>`) .join(''); }0
Usa ngFor para hacerlo "a la manera angular" 😉
getTags(tags: sring): string[] { return tags.split(','); } <!-- Category Card --> <div *ngFor="let car of cars" class="col-md-4"> <div class="card-image-overlay m-auto" id="tags"> <span class='card-detail-badge' *ngFor="let tag of getTags(car?.tags)"> {{tag}} </span> </div> </div>