Javascript 角度6：带有*ngIF的表格生成一个<；td>；比我需要的多

我有一个带有

*ngFor

的表，我迭代数组，在这个表中我想显示值，但是如果值为空，我想显示一个字符

-

，但是我的

*ngIf

生成一个

我需要的更多字符

我的桌子：

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

{{item.scheduleDate}日期：'dd/MM/yyyy'}
-  
{{item.customer.name}
- 
{{item.service.name}
- 
{{item.employee.name}
-  
{{item.value}货币：curSymbol}
-  
{{item.commissionvalue}货币：curSymbol}

---

我的

-

行打破了我的表格。如何在不中断表格的情况下显示该字符？

请考虑组合

，这样您的单元格就少了，但它们会一起显示：

<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条件。您的问题可能是由于没有区分空值和0/假值的条件造成的。

请考虑组合

，这样您的单元格就少了，但它们会一起显示：

<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条件。您的问题可能是由于不区分空值和0/假值的条件造成的。

无论如何，表的每一行必须具有相同的

编号才能不中断。使用不同的方法。对

进行硬编码，使其编号始终正确，并将

*ngIf

应用于单元格内容，而不是单元格本身。我如何在JeremyThille做到这一点？正如我所说：）硬编码您正确的

编号，然后放入一些内容，如

，并将

*ngIf

应用于div，不适用于单元格。如果单元格仅包含文本，我建议将

ngIf

应用于

ng容器

元素，该元素未在HTML输出中呈现。我支持您也可以使用管道（但我不知道，抱歉）尝试{{item.value？item.value | currency:curSymbol:'-}，表的每一行必须具有相同数量的

，才能不中断。使用不同的方法。对

进行硬编码，使其编号始终正确，并将

*ngIf

应用于单元格内容，而不是单元格本身。我如何在JeremyThille做到这一点？正如我所说：）硬编码您正确的

编号，然后放入一些内容，如

，并将

*ngIf

应用于div，不适用于单元格。如果单元格仅包含文本，我建议将

ngIf

应用于

ng容器

元素，该元素未在HTML输出中呈现。我支持您也可以使用管道（但我不知道，抱歉），请尝试{{item.value？item.value | currency:curSymbol:'-}