角度字符串插值 - 渲染 \n

Posted 2023-05-07

【中文标题】角度字符串插值 - 渲染 \\n

【英文标题】：Angular string interpolation - Render \n角度字符串插值 - 渲染 \n

【发布时间】：2017-12-27 12:27:52

【问题描述】：

我写了以下表格：

<form [formGroup]="newNewsForm" novalidate>
        <md-select placeholder="Thème" formControlName="tag">
          <md-option *ngFor="let sport of [id:'running', name:'running', id: 'golf', name:'golf']" [value]="sport.id">
            sport.name
          </md-option>
        </md-select>

        <md-input-container class="full-width">
          <input mdInput placeholder="Titre" formControlName="title">
        </md-input-container>

        <md-input-container class="full-width">
          <textarea mdInput placeholder="Contenu" formControlName="content"></textarea>
        </md-input-container>
      </form>

我想向用户显示实时预览，所以我写了以下内容：

<md-card class="full-width">

      <md-card-title> newNewsForm?.value?.title </md-card-title>
      <md-card-subtitle *ngIf="newNewsForm?.value?.tag"># newNewsForm?.value?.tag </md-card-subtitle>
      <md-card-content>
        <p>
            newNewsForm?.value?.content 
        </p>
      </md-card-content>

      <md-card-actions></md-card-actions>

    </md-card>

除了使用回车符之外，一切都很好。

如果我将以下内容写入文本区域： 第一行， 第二行

在预览中显示一行：第一行，第二行。

我尝试使用 [innerhtml] 失败。

有什么想法吗？

谢谢

【问题讨论】：

回车符在 HTML 中使用

你能贴出<md-card-content>组件的代码吗？

好吧@RadouaneROUFID，但我不能让我的用户输入 是文本

@skone 它是来自 AngularMaterial 的层代码，由 Google 提供。但仅供参考，我尝试将

我从未使用过md-card-content，但我猜你必须在文本区域内使用\n。如果您有 plnkr，那么我可能会为您提供更好的帮助。

【参考方案1】：

试试这个：

 newNewsForm?.value?.content.replace('\n','<br/>') 

【参考方案2】：

试试

@Component(
    selector: 'my-app',
    template: `
        <div>
          <textarea [(ngModel)]="val"></textarea>
          <p *ngFor="let subVal of vals">
            subVal
            <br/>
          </p>
        </div>
   `,
) 
export class App 
    val: string = ""

    get vals()
        return this.val.split("\n");
    

    constructor()