Question

我想只显示一个文本的50个字符，然后“阅读更多”比我点击我将显示全文，我在angular2中这样做，我正在尝试用打字稿，我留下我的代码。

HTML：

<head>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
</head>

<img src="viewer.png" style="width:200; height:150; position:absolute; bottom:0; right:0;z-index:-4000;">

打字稿：

    <table width="200px">
        <tr>
            <td>
                <div id="el_div">
                    uno dos tres cuatro cinco seis siete ocho nueve diez once doce trece catorce quince dieciseis diecisiete dieciocho diecinueve
                    veinte
                    uno dos tres cuatro cinco seis siete ocho nueve diez once doce trece catorce quince dieciseis diecisiete dieciocho diecinueve
                    veinte</div>
                <br />
                <div style="font-family:Courier New;font-size:8pt;color:Blue;cursor:hand" onclick="gestionarTexto(this);" id="mas">Leer más</div>
            </td>
        </tr>
    </table>

</body>

如果你可以伸出援助之手，因为它对我不起作用，我不知道HTML或TYPESCRIPT部分是否错误。

Answer 1

我尝试使用角管。

<强> HTML：

<table width="200px">
        <tr>
            <td>
                <div id="el_div" >{{strText | showChar:togglePipe}}</div>
                    <button *ngIf="strText.length > 50" (click)="showMoreText()">{{togglePipe ? "Show More" : "Show Less"}}</button>
                <br />
                <!-- <div style="font-family:Courier New;font-size:8pt;color:Blue;cursor:hand" (click)="gestionarTexto(this);" id="mas">Leer más</div> -->
            </td>
        </tr>
    </table>

<强> Component.ts

strText:string = "uno dos tres cuatro cinco seis siete ocho nueve diez once doce trece catorce quince dieciseis diecisiete dieciocho diecinueve veinte uno dos tres cuatro cinco seis siete ocho nueve diez once doce trece catorce quince dieciseis diecisiete dieciocho diecinueve veinte";
  togglePipe: boolean = true;
  showMore: boolean = true;
  showMoreText() {
    this.togglePipe = !this.togglePipe;

  }

<强> pipe.ts

import { PipeTransform, Pipe } from "@angular/core";

@Pipe({
    name: 'showChar'
})
export class showCharPipe implements PipeTransform{

    transform(value:string,togglePipe:boolean): string {
        if(value.length > 50 && togglePipe){
            return value.substring(0, 50) + '...';
        }else{
            return value;
        }


    }

}

所有最好的伙伴

显示文本的一部分，然后用“阅读更多”显示其余的立即angular2

1 个答案: