CODEWITHSUNDEEP
javascriptangularngforangular-ng-if
Matheus Barem
Matheus Barem

Reputation: 1627

Angular 6: table with *ngIF generates one <td> more than i need

I have a table with *ngFor that I iterate the array, in this table I want to show the values but if the values are null I want to show a character - but my *ngIf generate a <td>more that i need.

My table:

<tr *ngFor="let item of servicesFiltered; let i = index">
   <td class="values-left">{{ item.scheduleDate | date:'dd/MM/yyyy'}}</td>
   <td *ngIf="!item.customer.name"> - </td> 
   <td class="values-left">{{ item.customer.name }}</td>
   <td *ngIf="!item.service.name"> - </td>
   <td class="values-left">{{item.service.name}}</td>
   <td *ngIf="!item.employee.name"> - </td>
   <td *ngIf="userCheck == true" class="values-left">{{item.employee.name}}</td>
   <td *ngIf="!item.value"> - </td> 
   <td class="values-right">{{item.value | currency:curSymbol}}</td>
   <td *ngIf="!item.comissionValue"> - </td> 
   <td *ngIf="userCheck == true"  class="values-right">{{item.comissionValue | currency:curSymbol}}</td>                  
</tr>

The lines that i have <td *ngIf="!item.comissionValue"> - </td> break my table. How can i show that character without break my table?

Upvotes: 0

Views: 2932

Answers (1)

N. H
N. H

Reputation: 46

Consider combining the <td> so that you have fewer cells, but they are displayed together:

<tr *ngFor="let item of servicesFiltered; let i = index">
   <td class="values-left">{{ item.scheduleDate | date:'dd/MM/yyyy'}}</td>
   <td class="values-left" *ngIf="!item.customer.name"> - {{ item.customer.name }}</td>
   <td class="values-left" *ngIf="!item.service.name"> - {{item.service.name}}</td>
   <td class="values-left" *ngIf="!item.employee.name && userCheck == true"> - {{item.employee.name}}</td>
   <td class="values-right" *ngIf="!item.value"> - {{item.value | currency:curSymbol}}</td>
   <td class="values-right" *ngIf="!item.comissionValue && userCheck == true"> - {{item.comissionValue | currency:curSymbol}}</td>                  
</tr>

If you want to keep the same number of cells, then consider using <ng-container> with ngIf inside <td>:

<tr *ngFor="let item of servicesFiltered; let i = index">
   <td class="values-left">{{ item.scheduleDate | date:'dd/MM/yyyy'}}</td>
   <td><ng-container *ngIf="!item.customer.name"> - <ng-container></td> 
   <td class="values-left">{{ item.customer.name }}</td>
   <td><ng-container *ngIf="!item.service.name"> - <ng-container></td>
   <td class="values-left">{{item.service.name}}</td>
   <td><ng-container *ngIf="!item.employee.name"> - <ng-container></td>
   <td><ng-container *ngIf="userCheck == true" class="values-left">{{item.employee.name}}<ng-container></td>
   <td><ng-container *ngIf="!item.value"> - <ng-container></td> 
   <td class="values-right">{{item.value | currency:curSymbol}}</td>
   <td><ng-container *ngIf="!item.comissionValue"> - <ng-container></td> 
   <td><ng-container *ngIf="userCheck == true"  class="values-right">{{item.comissionValue | currency:curSymbol}}<ng-container></td>                  
</tr>

Lastly, if you want to stick with the plan of having varying numbers of <td>'s, then you should go over the if conditions more carefully. Your issue may be due to the conditions not distinguishing between null values and 0/false values.

Upvotes: 3

Related Questions