Блог

У меня проблема в том, что если мое значение-число, я пропускаю это взаимодействие и не печатаю его

Перебирайте нужные элементы. Это означает, что не используйте book.links in ngFor, а используйте свой собственный производный массив без пустых элементов.

Напр.

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

И используйте, например, геттер для компонента

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

В тс

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

В шаблоне

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

Поскольку вы не можете использовать несколько структурных/условных инструкций для одного и того же элемента (ngif ngfor), вы можете устранить проблему с помощью оболочки ng-контейнера.

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