Javascript apply 使用 ngFor 显示更多和显示更少的效果，以便它显示列表中所有文本的其余部分，而不仅仅是一个

我想用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 '-';
  }