奇怪的差距<ngFor模板>而不是* ngFor

Question

让后续代码：

<template ngFor [ngForOf]="items" let-item> 
      <li> 
       <a class='dnp1-menu-link' [routerLink]="[item.route]"> 
        <span>{{item.label}}</span> 
       </a> 
      </li> 
</template> 

和：

<li *ngFor="let item of items"> 
     <a class='dnp1-menu-link {{ item.domClass }}' [routerLink]="[item.route]"> 
      <span> {{item.label}} </span> 
     </a> 
</li> 

我认为这两段将导致相同的行为，但：

第一个代码段的结果：

，第二个：

这是预期吗？为什么？

我已经实现的原因是“\ n”个模板，并按照标签 例如之间，这个作品：

<template ngFor [ngForOf]="items" let-item><li> 
    <a class='dnp1-menu-link' [routerLink]="[item.route]"> 
     <span>{{item.label}}</span> 
    </a> 
</li></template> 

不过，我不明白为什么，不知道这是否是一个错误或功能。

Answer 1

就像@yurzui说的，问题是组件中的“preserveWhitespaces”。

由于组件的默认行为是保留任何空格。

以下两个代码段将导致两个不同的DOM：

<template><tag></tag></template> 

<template> 
    <tag></tag> 
</template> 

甲

<div *ngFor="..."> 

将有在DOM没有尾随空间，这就是差的来源。

要实现相同的行为，我们可以将preserveWhiteSpaces设置为false;