角2:切片表观

Question

我使用*ngFor重复json数组，并希望检查{a.body}}的文本长度。如果它大于20，则在结束时附加三倍周期(点)，否则什么都不会。

例如：如果我的短信是“你好吗，约翰?让我们晚上喝啤酒吧”

我希望输出是“你好吗，约翰？”

​

<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>

​

Answer 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>