In 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));
}

In template

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

Iterate over desired items. It means do not use book.links in ngFor but use your own derived array, without empty items.

Eg

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

And use eg getter on component

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

As you cannot use several structure/conditional instructions on same element (ngif + ngfor), you might fix the issue by using a ng-container wrapper.

<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>