새 줄 '\n'이(가) 유형 스크립트에서 작동하지 않습니다.

새 줄 '\n'이(가) 유형 스크립트에서 작동하지 않습니다.

UI에 표시될 typescript 구성요소에 목록 항목을 만들고 있습니다.List 항목은 별도의 줄로 표시되어야 합니다.그래서 아래와 같이 새로운 라인 문자 \n를 추가했습니다.그러나 여전히 목록 항목은 같은 줄에 표시됩니다.아래는 코드입니다.왜 안 되는지 알아요?

유형 스크립트 코드:

@Output() excludeDisplay: any = '';
@Output() includeDisplay: any = '';
includeValues: any = '';
excludeValues: any = '';

this.includeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("include values are "+ this.includeValues);
this.excludeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("exclude values are "+ this.excludeValues);
this.includeDisplay = this.includeValues;
this.excludeDisplay = this.excludeValues;

HTML 코드:

<ul id="excludedUl" required>{{ excludeDisplay }}</ul>
<ul id="includedUl" required>{{ includeDisplay }}</ul>

CSS 코드:

#includedUl {
  float: right;
  width: 33%;
}

#excludedUl {
  float: right;
  width: 33%;
}

고정 너비를 사용해야 합니다.

 <div style="width: 500px;white-space: pre-line">{{property}}</div>

스크립트 형식에서 '\n'을 사용하여 새 줄을 추가합니다.

\nHTML에서 줄 바꿈을 발생시키지 않습니다.
다음을 사용해야 합니다.<br/> 또는 텍스트를 블록 요소로 묶습니다.

this.includeValues += this.merId + ',' + this.explodeStatus + '<br/>';
this.excludeValues += this.merId + ',' + this.explodeStatus + '<br/>';

또는

this.includeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';
this.excludeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';

HTML에만 정보가 표시될 경우 CSS 속성을 사용할 수 있습니다.white-space'\n'자만 깨면 됩니다.white-space: pre-line;여기에 언급된 대로 MDN을 확인합니다.

그래도 원본 텍스트가 필요한 경우\n다른 것을 포함하여, 당신은 항상 Str.replace 메서드에 전화를 걸 수 있습니다, 모두를 변경하기 위해서.\n안으로<br/>템플릿이 예상대로 작동합니다.다음과 같은 작업을 수행할 수 있습니다.

this.includeDisplay = this.includeValues.replace(/\n/g, '<br />');

MDN 문서를 참조할 수 있습니다.

언급URL : https://stackoverflow.com/questions/44743813/new-line-n-is-not-working-in-typescript