3
votes

Ajout d'une nouvelle ligne dans MatDialog Content Angular 7

J'utilise MatDialog et j'essaie d'ajouter une nouvelle ligne dans la définition de contenu. \ n et ne le font pas. Existe-t-il un autre moyen sans avoir à entrer manuellement dans le html et à le modifier puisqu'il s'agit d'un composant réutilisable:

<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>
  <p>{{data.content}}</p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="Cancel()">Cancel</button>
  <button mat-button (click)="Ok()" cdkFocusInitial>Ok</button>
</div>

HTML

var status: MatDialogRef<GenericDialogComponent> this.dialog.open(GenericDialogComponent,{
     width: '400px',
    data: {title: "Sample Title?", content: "Document " + this.docID + " has been saved. The users email address is provied below:\n\n"+this.email+"</b>"} });


2 commentaires

Simple
ne fonctionne pas non plus? Je suppose que cela ne prend pas de HTML


Non ça ne marche pas et ça ne prend pas html


3 Réponses :


1
votes

Essayez :

<div mat-dialog-content [innerHtml]="'<p>' + data.content + '</p>'">

MODIFIER La réponse de @Christian Benseler est meilleure / plus jolie.


2 commentaires

Ce n'est pas innerHtml, c'est innerHTML


Cela n'a pas d'importance, en fait.



6
votes

Vous pouvez utiliser la propriété [innerHTML]:

const status: MatDialogRef<GenericDialogComponent> this.dialog.open(GenericDialogComponent,{
     width: '400px',
    data: {title: "Sample Title?", content: `Document ${this.docID} has been saved. The users email address is provied below:<br /><b>${this.email+}</b>`} });

et au lieu de \ n \ n , utilisez la balise html br.

<p [innerHTML]="data.content"></p>


4 commentaires

est-ce que le
entre les guillemets comme 'ligne suivante ' parce qu'il ne le fait toujours pas mais débogage toujours merci


Pourquoi utilisez-vous sans ouverture ?


@Flash J'ai mis à jour ma réponse avec la chaîne de contenu actuelle (en utilisant la chaîne de modèle).


c'est tellement bizarre que c'était parce que je n'avais pas l'ouverture? avec @TimVns, ça a fonctionné sans ça?



2
votes

Essayez d'utiliser le

 si vous avez besoin / souhaitez utiliser  \ n . 

Mais je suggérerais la réponse de Christian Benseler !


0 commentaires