角度2：切片管答案

【问题标题】：Angular 2 : slicepipe角度2：切片管
【发布时间】：2018-03-04 18:54:13
【问题描述】：

我正在使用 *ngFor 来重复 json 数组，并且我想检查 {{a.body}} 的文本长度。如果大于 20，则在末尾附加三倍句点（点），否则什么都没有。

例如。如果我的文字是“约翰你好吗？我们晚上喝啤酒吧”

我希望输出是“你好吗 john？Le...”

<md-card class="example-card1" *ngFor="let a of data">
  <md-card-header>
    <div md-card-avatar class="example-header-image"></div>
    <md-card-title>{{a.name}}</md-card-title>
    <md-card-subtitle>{{a.email}}</md-card-subtitle>
  </md-card-header>
  <img md-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <md-card-content>
    <p>
      {{a.body}}
    </p>
  </md-card-content>
  <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
</md-card>

【问题讨论】：

可能对你有帮助：stackoverflow.com/questions/44669340/…

标签： angular

【解决方案1】：

你应该像这样写你的code：

<md-card class="example-card1" *ngFor="let a of data">
  <md-card-header>
    <div md-card-avatar class="example-header-image"></div>
    <md-card-title>{{a.name}}</md-card-title>
    <md-card-subtitle>{{a.email}}</md-card-subtitle>
  </md-card-header>
  <img md-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <md-card-content>
    <p>
      {{ a.body.length > 20 ? a.body.substring(0,20) + ' ...' : a.body }}
    </p>
  </md-card-content>
  <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
</md-card>

【讨论】：