奇怪的差距<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;