web-dev-qa-db-ja.com

改行 '\ n'はTypescriptで機能していません

UIに表示されるTypeScriptコンポーネントのリストアイテムを作成しています。リスト項目は別々の行に表示されるはずです。そこで、以下のように改行文字\ nを追加しました。それでも、リスト項目は同じ行に表示されます。以下はコードです。なぜ機能しないのか考えていますか？

UI Display of ul list

TypeScriptコード：

@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%;
}
htmlcsshtml5typescript
8
Poonkodi Sivapragasam

\nはnotでHTMLに改行を入れます。
<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>';
9
Nitzan Tomer

固定幅を使用する必要があります：

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

TypeScriptでは、「\ n」を使用して新しい行を追加します。

1
Palash Roy