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

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 here

Don't want to see your face, you better disappear

The fire's in their eyes and their words are really clear

So beat it, just beat it

You better run, you better do what you can

Don't want to see no blood, don't be a macho man

You want to be tough, better do what you can

So beat it, but you want to be bad

Just beat it, beat it, beat it, beat it

No one wants to be defeated

Showin' how funky and strong is your fight

It doesn't matter who's wrong or right

Just beat it, beat it

Just beat it, beat it

Just beat it, beat it

Just beat it, beat it

They're out to get you, better leave while you can

Don't want to be a boy, you want to be a man

You want to stay alive, better do what you can

So beat it, just beat it`

showmore:boolean = false

Answer 1

可能该click事件未在禁用的文本区域中注册。尝试将其包裹在div容器中。<div (click)="showmore=!showmore">&nbsp; <textarea disabled rows='10' cols='40' >&nbsp; &nbsp; {{ showmore ? text : (text|slice:0:477) + '...show More' }}&nbsp; </textarea></div>