En ts

 sanitize(val){ return val.split('/').pop().replace(/-/g, " "); } get bookLinks() { return this.book.links .map(item=> ({...item, href:this.sanitize(item.href)})) .filter(item=> !this.isNumeric(item.href)); }

en plantilla

 <button type="button" *ngFor="let singleBook of bookLinks"> <span (click)="showI(book, $event, i)" > {{ singleBook.href }} </span> </button>

Iterar sobre los elementos deseados. Significa que no use book.links en ngFor, sino que use su propia matriz derivada, sin elementos vacíos.

P.ej

 <button *ngFor="let singleBook of validLinks" type="button"> ... </button>

Y use, por ejemplo, getter en el componente

 get validLinks () { return this.book.links.filter(b => !!b.trim()) }

Como no puede usar varias instrucciones de estructura/condicionales en el mismo elemento (ngif + ngfor), puede solucionar el problema usando un contenedor ng-container.

 <ng-container *ngFor="let singleBook of book.links"> <button type="button" *ngIf="selectedAction(singleBook.href)"> <span (click)="showI(book, $event, i)"> {{ selectedAction(singleBook.href) }} </span> </button> </ng-container>