Angular 4 on click 功能 - 如何使用返回值？答案

【问题标题】：Angular 4 on click function - how to use returned value?Angular 4 on click 功能 - 如何使用返回值？
【发布时间】：2017-11-27 14:12:45
【问题描述】：

我需要关于 Angular 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>

我在 row.messageText 的表格单元格中有一个字符串，它被 *ngIf 指令切割成较短的字符串。如果字符串的长度太大，我会通过 substr() 函数缩短它。并显示在表格单元格中。我还向它添加了一个“更多”跨度，以便我可以单击它并展开此字符串。

还有我的问题 - 我该怎么做才能单击“更多”并显示该字符串的整个长度？我的想法是绑定点击函数以跨越“显示更多”并返回一个完整的字符串。

这是我的组件 .ts 文件中的函数：

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

函数返回完整的字符串。如何将它应用到我的 component.html？

【问题讨论】：

标签： angular

【解决方案1】：

你可以在表达式中调用函数

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

【讨论】：

【解决方案2】：

您可以将自定义参数showFullString 发送到您的hasString 管道。

@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;
}

【讨论】：