クリック機能の角度4 - 返された値の使い方は？

Question

私はそのような要素を持っているアンギュラ4にクリック機能に助けが必要：

 <mat-cell *matCellDef="let row"> 
     <span>{{row.messageText | hasString}}</span> 
     <span *ngIf="row.messageText && row.messageText.length >= 30"><span class="show-more" (click)="showMore(row)">more</span></span> 
     </mat-cell> 

私は* ngIfディレクティブで短い文字列に切断されるrow.messageTextから表のセル内の文字列を、持っています。文字列の長さが多すぎる場合、substr（）関数で短縮します。表のセルに表示します。私はまたそれに "より多くの"スパンを追加するので、私はそれをクリックしてこの文字列を展開することができます。

問題があります。どうすれば "more"をクリックしてこの文字列の全長を表示できますか？私の考えは、クリック機能をバインドして「もっと見る」と完全な文字列を返すことです。

これは私のコンポーネント.TSファイル内の関数である：

showMore(row) { 
    return row.messageText.substr(); 
} 

機能は完全な文字列を返します。これを私のcomponent.htmlにどうやって適用できますか？

Answer 1

あなたは、あなたのhasStringパイプにカスタムパラメータshowFullStringを送信することができる発現

<span>{{showMore(row)}}</span> 

Answer 2

内の関数を呼び出すことができます。

@Pipe({name: 'hasString'}) 
export class hasString implements PipeTransform { 
    /** 
    * 
    * @param value 
    * @returns {String} 
    */ 
    transform(value: String, showFullString:Boolean): String { 
     if(showFullString) { 
      return value; 
     }else { 
      return value.substr() ; //substring as per your requirement. 
     } 
    } 
} 

このshowFullStringブールshowMoreメソッドから切り替えることができます。

showMore(row) { 
    this.showFullString = true; 
}