Angular 2 innerHTML不适用于切片或文本区域

Question

我有一个名为user.about的字符串，它是这样的：

<p>Sed varius nisl id malesuada rutrum. Praesent sodales mattis rhoncus. Cras in sem a est euismod maxim us nec sed dui. Curabitur id nisl condimentum, sodales mauris eget, tempus felis.</p><p>Aenean in porttitor libero, vitae euismod dolor. Aliquam vel sagittis est, vitae volutpat nulla. Inte ger cursus sagittis erat at rhoncus. Sed blandit feugiat imperdiet. Nunc aliquam ut nunc eget accumsan. Nunc ut nisi eget augue aliquet porta a vitae justo.</p><p>Sed varius nisl id malesuada rutrum. Praesent sodales mattis rhoncus. Cras in sem a est euismod maxim us nec sed dui. Curabitur id nisl condimentum, sodales mauris eget, tempus felis.</p><p>Aenean in porttitor libero, vitae euismod dolor. Aliquam vel sagittis est, vitae volutpat nulla. Inte ger cursus sagittis erat at rhoncus. Sed blandit feugiat imperdiet. Nunc aliquam ut nunc eget accumsan. Nunc ut nisi eget augue aliquet porta a vitae justo.</p>

我想做的是在两个不同的地方使用此字符串，但是使用段落标签，我试图将其与slice一起使用：

<p [innerHTML]="user.about">{{user.about | slice:1:150}}</p>

这根本不起作用，

我也在尝试像这样在文本区域中使用innerHTML：

<textarea name="about" [(ngModel)]="user.about" rows="7" class="area2" [innerHTML]="user.about">{{user.about}}</textarea>

但这也不起作用。当我希望它们没有段落标签，但要有间距时，它会显示段落标签。

我在做什么错了？

Answer 1

如果要在可编辑区域中放置它，则需要一个contenteditable元素。

仅用于显示，只需使用[innerHTML]并正常调用slice（这些属性中没有“模板语法”）：

<h1>Editable area</h1>
<div contenteditable [innerHTML]="user.about"></div>

<h1>Paragraph with slice</h1>
<p [innerHTML]="user.about.slice(0, 150)"></p>

StackBlitz demo

Answer 2

只需使用[innerHtml]或花括号，但不能同时使用两者，如果您在文本区域中删除了花括号，则应该可以使用。

另一方面，如果您需要在段落标记中切片文本，则可能只需要将文本分配给其他变量