应用更多显示，使用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

您正在解决这个问题。无需实际修改原始文本本身。

1. 让我们使用Angular的 |切片管道限制显示的文本。 https://angular.io/api/api/common/common/slicepipe

2. >*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.`;
}

工作示例：