이상한 격차 때 사용 ngFor

Question

는 다음과 코드 수 있습니다 <템플릿 ngFor> 대신 *의 :

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

을하지만, :

제 니펫 결과 :

및 두번째 : 012,356,

예상 되나요? 왜? 내가 이유를 실현했습니다

템플릿 및 태그 예에 따라 사이 "\ 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"입니다.

구성 요소의 기본 동작은 공백을 유지하므로

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

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

<div *ngFor="..."> 

가 DOM에는 후행 공백이없는 것이며,이 차이의 원인 :

두 다음 조각은 두 개의 서로 다른 DOM 발생합니다.

동일한 동작을 수행하려면 preserveWhiteSpaces를 false로 설정할 수 있습니다.