角度字符串插值 - 渲染 \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，那么我可能会为您提供更好的帮助。

标签： angular textarea string-interpolation

【解决方案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() {}
}

【讨论】：