Tengo este fragmento de código en mi componente HTML.
<ul> <li *ngFor="let item of items"> <a href="{{item.link}}" target="_blank">{{item.name}}</a> <span *ngIf="item.Description" class="text-muted"> {{item.Description}}</span> </li> </ul>Solicité un objeto "elemento" de una API y tiene la propiedad item.link y item.name. Mi problema es que a partir de la API que obtengo, el valor que obtengo de item.link podría tener la dirección URL completa de un elemento (algo así como "https://stackoverflow.com") o alguna URL corta (como "www. google.com").
Mi objetivo es solo poder manejar las diferencias en el enlace devuelto por la API, de modo que cuando se haga clic, vaya a la página correcta.
Me gustaría que href se actualice para que agregue "https://" delante de enlaces como "www.google.com" cada vez que pasa por elementos en el bucle for.
Intenté agregar "//" delante de "item.link" en la etiqueta a. Arregla item.link cuando es la URL corta sin https, pero rompe el enlace con https que ya está en item.link.
Cualquier ayuda sería muy apreciada. :) Gracias por adelantado.
¿Por qué no verificar si ya tiene https y luego consumirlo?
<ul> <li *ngFor="let item of items"> <a href="{{item.link.startsWith('https://') ? item.link : `https://${item.link}`}}" target="_blank">{{item.name}}</a> <span *ngIf="item.Description" class="text-muted"> {{item.Description}}</span> </li> </ul> Puede extender esto o escribir una función personalizada para verificar otros casos como http o si ya tiene :// y otros casos extremos.