Question

我试图将一个段落分成基于＆＃39;的单独行。＆＃39;。

到目前为止，我已经能够创建一个完全相同的管道。

import {ElementRef, Pipe, PipeTransform, Renderer2} from "@angular/core";

    @Pipe({
        name: 'parseText'
    })
    export class ParseTextPipe implements PipeTransform {

        constructor(private renderer: Renderer2, private element: ElementRef) {}

        transform(text: string) {
            let lines: string[] = text.split('.');

            const list = this.renderer.createElement('ol');

            for (let i = 0; i < lines.length; i++) {
                const listItem = this.renderer.createElement('li');
                const line = this.renderer.createText(lines[i]);

                this.renderer.appendChild(listItem, line);
                this.renderer.appendChild(list, listItem);
            }

            console.log('from pipe');
            console.log(list);

            return list;
        }
    }

in html：

<ion-card>
    <ion-card-content>
        {{someText | parseText}}
    </ion-card-content>
</ion-card>

现在，当我返回此列表时，它会在控制台中记录为<ol>...</ol>。但是，浏览器会将其呈现为HTMLOListElement object。如何呈现为html标记？

Angular 4 Pipe / Directive DOM操作

0 个答案: