截断文本和“显示更多”文本

Question

我是 Angular 的新手，我有一个文本区域（始终禁用），文本区域的数据将来自后端。我需要在一些字符限制后截断文本并显示....show more。当用户单击文本框时，它应该显示显示其余文本。我已经找到截断文本的方法，但我无法显示其余文本。我在下面提供了 stackblitz 链接。任何帮助将不胜感激。堆栈闪电链接<textarea disabled rows='10' cols='40'(click)="showmore=!showmore">  {{showmore?text:(text|slice:0:477)+'...show More'}}  </textarea>  text = `They told him don't you ever come around hereDon't want to see your face, you better disappearThe fire's in their eyes and their words are really clearSo beat it, just beat itYou better run, you better do what you canDon't want to see no blood, don't be a macho manYou want to be tough, better do what you canSo beat it, but you want to be badJust beat it, beat it, beat it, beat itNo one wants to be defeatedShowin' how funky and strong is your fightIt doesn't matter who's wrong or rightJust beat it, beat itJust beat it, beat itJust beat it, beat itJust beat it, beat itThey're out to get you, better leave while you canDon't want to be a boy, you want to be a manYou want to stay alive, better do what you canSo beat it, just beat it`showmore:boolean = false

Answer 1

可能该click事件未在禁用的文本区域中注册。尝试将其包裹在div容器中。

<div (click)="showmore=!showmore">

  <textarea disabled rows='10' cols='40' >

    {{ showmore ? text : (text|slice:0:477) + '...show More' }}

  </textarea>

</div>