Браузер не анализирует теги HTML, возвращаемые угловым каналом

Я хочу передать значение каналу и позволить каналу превратить его в список. Возможно, это не лучший способ решить эту проблему, но это первое, что пришло в голову.

В основном у меня простая таблица. И у меня есть свой шаблон как таковой

<tr *ngFor="let res of results">
    <td>{{res.value1}}</td>
    <td>{{res.value2 | list}}</td>
</tr>

Моя list трубка такая же.

импортировать {Pipe, PipeTransform} из '@ angular / core';

@Pipe({
    name: 'list'
})
export class ListPipe implements PipeTransform {
    transform(value: string, args?: any): any {
        let newList: string[];
        newList = value.split(',');
        let output = '&lt;ul&gt;';
        newList.forEach(val => {
            output += `&lt;li&gt;${val}&lt;/li&gt;`;
        });
        output += '&lt;/ul&gt;';
        return output;
    }
}

Мой ожидаемый результат был бы примерно таким

<tr>
    <td>value 1</td>
    <td>
        <ul><li>value2.a</li><li>value2.b</li></ul>
    </td>
</tr>

Но происходит то, что на моей странице отображаются буквальные значения <ul><li>value2.a</li><li>value2.b</li></ul>.

Что я делаю неправильно?


angular html angular-pipe
person gh0st    schedule 13.10.2017    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Я подозреваю, что вам следует использовать свойство innerHTML для его отображения:

<td [innerHTML]="res.value2 | list"></td>

И смени трубку, например:

let output = '<ul>';
newList.forEach(val => {
  output += `<li>${val}</li>`;
});
output += '</ul>';

Пример Stackblitz

Интерполяция <td>{{res.value2 | list}}</td> не работает, потому что angular создает текстовый узел и обновляет его свойство nodeValue, поэтому он будет отображаться в виде строки.

person yurzui    schedule 13.10.2017

arrow_upward
0
arrow_downward

Почему бы тебе просто не использовать *ngFor? Вы уже используете его на tr

person Christian    schedule 14.10.2017
comment
Итак, ответ выше ответил на мой вопрос. Но я мог бы тоже пойти по этому пути. Я просто искал чистый способ сделать это с минимальным количеством кода. - person gh0st; 18.10.2017