apply show more 和 show less effect 使用 ngFor，所以它显示列表中所有文本的其余部分，而不仅仅是一个

Question

我想使用 ngFor 减少显示并显示更多效果，以便通过单击“查看更多”按钮，展开所有文本，而不仅仅是一个，我希望如果文本超过 150 个字符，我应用了文本的一部分+“...”并隐藏了其余文本。当我点击查看更多按钮时，所有文本的其余部分都会出现，而不仅仅是一个，并且查看更多按钮文本会更改为查看更少。

我没有太大的进步，所以没有完整的代码。

<td *ngFor=" let test of testData?.testDataDescription?.testDataDescriptionCode"> 

     <div #myDivText>
          {{handleBigText(test?.descriptionArea?.summary, myDivText)}}
     </div>

     <span #extend 
     (click)="collapseText( test?.description?.textSumarryDescription, myDivText, extend)">
     <img src="/assets/images/arrow_down.svg"/>
          view more
     </span>
</td>




  public maxLength = 150;
  public resizeText = 3;
  public sizeDescription = this.maxLength;
  public sizeDescriptionDots = this.maxLength + this.resizeText;

  collapseText(text: string, myDivText: Element, extend: Element) {
    const size = text.length - 3;
    if (myDivText.innerHTML.length <= size) {
      myDivText.innerHTML = text;
      extend.innerHTML = `<img src="/assets/images/arrow_up.svg" />
              see less`;
    } else {
      myDivText.innerHTML = `${text.substring(0, this.sizeDescriptionDots)}...`;
      extend.innerHTML = `<img src="/assets/images/arrow_down.svg"/>
             view more`;
    }
  }

  handleBigText(text: string, myDivText: Element) {
    if (text) {
      const textSize = this.maxLength + this.resizeText;
      this.sizeDescription = textSize;
      this.sizeDescriptionDots = textSize;

      return text.length > textSize
        ? `${text.substring(0, textSize)}...`
        : text;
    }

    return '-';
  }

Answer 1

你把这个复杂化了。无需实际修改原文本身。

让我们使用 Angular 的 | slice 管道来限制显示的文本。 https://angular.io/api/common/SlicePipe
让我们使用 *ngIf 有条件地显示更多或更少的文本。

<hello name="{{ name }}"></hello>
<p> {{ showMore ? text : (text | slice: 0:150) }} <span *ngIf="!showMore">...</span>
  <a href="javascript:;" *ngIf="!showMore" (click)="onShow()">[Show More]</a>
  <a href="javascript:;" *ngIf="showMore" (click)="onShow()">[Show Less]</a>
</p>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  showMore = false;

  onShow () {
    this.showMore = !this.showMore;
  }

  text = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`;
}

工作示例：https://stackblitz.com/edit/angular-easy-show-more-6ispwx?file=src%2Fapp%2Fapp.component.html

apply show more 和 show less effect 使用 ngFor，所以它显示列表中所有文本的其余部分，而不仅仅是一个

apply show more and show less effect using ngFor, so that it shows the rest of all the text in the list and not just one

javascript

angular

typescript

ngfor