Question

我想对主体进行预览以限制ionic Card组件中的x个字符并添加一个“阅读更多”按钮，我使用了json数据并在主页上显示了数据。

home.ts

import { Component     } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PostsProvider } from '../../providers/posts/posts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  posts: any;

  constructor(public navCtrl: NavController, public postsProvider: PostsProvider) {
    this.getPosts();
  }

  getPosts() {
    this.postsProvider.getPosts()
    .then(data => {
      this.posts = data;
    });
  }

}

home.html

<ion-header>
    <ion-navbar>
      <ion-title>
        Our News
      </ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content no-padding no-border no-margin0>
    <ion-card *ngFor="let post of posts">
      <img src="https://placekitten.com/760/300"/>
      <ion-card-content>
        <ion-card-title class="post-title">
          {{ post.title }}
        </ion-card-title>
        <p class="post-content">
          {{ post.body}}
        </p>
      </ion-card-content>
    </ion-card>
  </ion-content>

卡组件中是否有任何选项可以完成这项工作，或者应该由我自己开发？

Answer 1

您可以在Javascript中使用substring()函数。它使用2个整数参数，并返回从第一个参数的索引到第二个参数的索引的旧字符串的一部分。

例如：

'Hello World!'.substring(0, 5)

返回：

'Hello'

因此，在您的情况下，您需要创建一个过滤器，该过滤器使用子字符串函数将要在预览中显示的前n个字符切成薄片。

Ionic：卡片组件主体预览受限字符

1 个答案: