Ionic: компонент карты предпросмотра тела ограниченных символов

Question

Я хочу сделать предварительный просмотр тела 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

Вы можете использовать функцию substring() в Javascript.Он принимает 2 целочисленных параметра и возвращает фрагмент старой строки, начиная с индекса первого параметра и заканчивая индексом второго параметра.

Например:

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

возвращает:

'Hello'

Так что в вашем случае вам нужно будет создать фильтр, который использует функцию подстроки для нарезки первых n символов, которые вы хотите показать в вашем предварительном просмотре.