I have a problem that if my value is number I skip that interaction and don't print it

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

And in ts is problem:

  isNumeric(value: string) {
    return /^-?\d $/.test(value);
  }

  selectedAction(val: any, action: string) { 
    let res =  val.split('/').pop().replace(/-/g, " "); 
    if(this.isNumeric(res)){ 
       return ''
    } 
    return res;  
    
  }

This is work but in template (html) is printed button value with value ''

right now i see few button

<button> </button> //this is problem show me empty button ...
<button> first </button>
<button> second </button>

I won't to show empty values.. if values is empty i want to remove button or skip interation or whatever?

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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>