web-dev-qa-db-fra.com

La nouvelle ligne '\ n' ne fonctionne pas dans le script

Je crée un élément de liste dans le composant TypeScript qui sera affiché dans l'interface utilisateur. Les éléments de la liste doivent être affichés sur des lignes distinctes. J'ai donc ajouté une nouvelle ligne de caractères\n comme ci-dessous. Mais les éléments de la liste sont toujours affichés sur la même ligne. Voici le code. Une idée pourquoi ça ne marche pas?

UI Display of ul list

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

Code HTML:

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

Code CSS:

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

#excludedUl {
  float: right;
  width: 33%;
}
htmlcsshtml5typescript
8
Poonkodi Sivapragasam

\n ne pas provoque un saut de ligne en html.
Vous devrez utiliser un <br/> ou envelopper votre texte dans un élément de bloc.

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

Ou

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

Besoin d'utiliser une largeur fixe:

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

Dans TypeScript, utilisez '\ n' pour ajouter une nouvelle ligne.

1
Palash Roy