Angular 6: table with *ngIF 生成一个 <td> 比我需要的多

Question

我有一个 table 和 *ngFor 我迭代数组，在这个 table 我想显示值但是如果值是空的我想显示一个字符- 但我的 *ngIf 生成了我需要的 <td>。

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

我 <td *ngIf="!item.comissionValue"> - </td> 的台词打破了我的 table。我怎样才能在不破坏我的 table 的情况下显示该角色？

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

最后，如果您想坚持使用不同数量的 <td> 的计划，那么您应该更仔细地检查 if 条件。您的问题可能是由于条件不区分空值和 0/false 值。

Angular 6: table with *ngIF 生成一个 <td> 比我需要的多

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

javascript

angular-ng-if

ngfor

angular