Question

我在html页面上显示数组，如下所示。我想传递来自变量divtext的HTML内容以显示在html上，但<p> </p>来自html，它不会呈现为HTML代码。请指导我该怎么做。

this.divtext将p标签属性呈现为文本，我需要它来呈现HTML内容，我想为此添加粗体属性和类。请指导我该怎么做。

page.ts代码如下：

import { Component, OnInit } from '@angular/core';
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {DndModule} from 'ng2-dnd';

@Component({
  selector: 'app-dragdrop2',
  templateUrl: './dragdrop2.component.html',
  styleUrls: ['./dragdrop2.component.css']
})
export class Dragdrop2Component implements OnInit {

public divtext="";
listOne: Array<string> = [];

  constructor() { }

  ngOnInit() {
    this.divtext=`<p> I am from div <p>`;
    this.listOne = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water',this.divtext];
  }
}

page.html代码：

<h4>Simple sortable handle</h4>
<div class="row">
    <div class="col-sm-3">
        <div class="panel panel-success">
            <div class="panel-heading">
                Favorite drinks
            </div>
            <div class="panel-body">
                <ul class="list-group" dnd-sortable-container [sortableData]="listOne">
                    <li *ngFor="let item of listOne; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">
                      <span dnd-sortable-handle>=</span>&nbsp;
                      {{item}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-body">
                My prefences:<br/>
                <span *ngFor="let item of listOne; let i = index">{{i + 1}}) {{item}}<br/></span>
            </div>
        </div>
    </div>
</div>

Answer 1

请在声明标签中附上声明的html部分。

例如：

而不是

<span *ngFor="let item of listOne; let i = index">{{i + 1}}) {{item}}<br/></span>

将其更改为

<span *ngFor="let item of listOne; let i = index">{{i + 1}}) <pre>{{item}}</pre><br/></span>

它将以您想要的方式呈现。

Answer 2

  <pre>

通过使用它你可以渲染它先生

Answer 3

使用innerHTML从列表中呈现值。

<div *ngFor="let item of listOne; let i = index">
          <span [innerHtml]="item"></span>
</div>

如何在数组字符串中传递HTML内容？

3 个答案: