angular7 - 在 ngx-datatable-column 中操作 moretext 和 lesstext

Question

我在 angular 7 中使用 ngx-datatable 。

我有一行包含超过 1000 个字符的数据。

我想 在这一行中添加动作moretext和lesstext 。

我尝试使用此代码：

  <ngx-datatable-column name="comment" [flexGrow]="1.5">
        <ng-template let-rowIndex="rowIndex" ngx-datatable-cell-template  let-row="row"   let-value="value">
           
            <span title={{row.texttransfer}}  [innerHTML]="row.texttransfer != null ? row.texttransfer.substring(0,10)+ moretext : ''" (click)="read(row.texttransfer,rowIndex)" id="texttransfer{{rowIndex}}" class="more">
                      
              </span>

              
        </ng-template>
      </ngx-datatable-column>

在.ts

public read(text:any,index:any){
        var moretext = "read more";
        var lesstext = "read less";
      if(text!=null && text!=''&& text.length>10 ){
        if($("#texttransfer"+index).hasClass("less")) {
          $("#texttransfer"+index).removeClass("less");
          $("#texttransfer"+index).addClass("more");
          document.getElementById("texttransfer"+index).innerHTML = text.substring(0,10)+"... <span style='color:red;font-weight:bold;cursor:pointer;'>"+moretext+"</span>";
          

        }else if($("#texttransfer"+index).hasClass("more")){
          $("#texttransfer"+index).removeClass("more");
          $("#texttransfer"+index).addClass("less");
          document.getElementById("texttransfer"+index).innerHTML = text.substring(0,10) + text.substring(12,text.length -1) +"    <span style='color:red;font-weight:bold;cursor:pointer;'>"+lesstext  +"</span>";
        }
      }
    }      
    

此代码有时会成功运行但有时行文本传输未完全显示的问题。

标签： angular7