Angular 字符串插值 - 渲染 \n

Question

我写了下面的表格：

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

除了使用回车 return 字符外，一切正常。

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

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

我尝试使用 [innerHtml] 失败。

有什么想法吗？

谢谢

Answer 1

试试这个：

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

Answer 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() {}
}

Angular 字符串插值 - 渲染 \n

Angular string interpolation - Render \n

textarea

string-interpolation

angular