Угловой 6: таблица с * ngIF генерирует на <td>больше, чем мне нужно

Question

У меня есть таблица с *ngFor, в которой я повторяю массив, в этой таблице я хочу показать значения, но если значения равны нулю, я хочу показать символ -, но мои *ngIf генерируют <td> больше, чем мне нужно.

Моя таблица:

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

Строки, которые у меня есть <td *ngIf="!item.comissionValue"> - </td>, разбивают мою таблицу.Как я могу показать этого персонажа без разрыва моего стола?

Answer 1

Рассмотрите возможность объединения <td>, чтобы у вас было меньше ячеек, но они отображаются вместе:

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

Если вы хотите сохранить одинаковое количество ячеек, тогда рассмотрите возможность использования <ng-container> с ngIf внутри <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>

Наконец, если вы хотите придерживаться плана, предусматривающего варьирование числа <td>, то вам следует более тщательно изучить условия if.Ваша проблема может быть связана с условиями, не различающими нулевые значения и 0 / ложные значения.