Добавить опцию видеть больше к данным сервера в angular 8 - PullRequest
Новая
       7

Добавить опцию видеть больше к данным сервера в angular 8

3 голосов
/ 29 мая 2020

У меня проблема с моим проектом.

Я хочу добавить параметр see more в абзац, и данные этого абзаца поступают с сервера.

Я знаю, как добавить see more параметр для HTML абзаца, но я не знаю, как добавить параметр see more к данным, поступающим с сервера. 

<p>Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas <span id="dots">...</span>
<span id="more">Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas Jayesh Vyas 
Jayesh Vyas Jayesh Vyas Jayesh Vyas .</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

JavaScript код 

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

Итак, вы можете видеть выше, я пробовал приведенный выше код для абзаца, и у меня он работает нормально.

, но в моем проекте компонент HTML как показано ниже. 

<div  class="col-12 col-lg-12" *ngFor="let post of rec?.attributes?.Postings | filter : searchText | filter:filterText; let i=index">
<div class="col-12 noRightPadding" style="overflow-wrap: break-word;white-space: pre-line;word-break:break-all;
">{{post?.attributes?.Message}} </div>
</div>

вы можете видеть, что абзац идет как post.attributes.Message, и я не знаю, как добавить параметр see more для этого, если он превышает два строк.

может кто-нибудь мне с этим помочь?

Ответы [ 3 ]

3 голосов
/ 29 мая 2020

Demo Вы можете сделать это с условием if и создать еще одно свойство для каждого элемента, например post? .Attributes? .IsMore по умолчанию false 

   <div  class="col-12 col-lg-12" >
        <div class="col-12 noRightPadding">
           {{ post?.attributes?.Message.length>100 ? post?.attributes?.Message.substring(0,10)+'...': post?.attributes?.Message}} 
            <a *ngIf=" post?.attributes?.Message.length>10"(click)="post?.attributes?.isMore=!post?.attributes?.isMore">{{!post?.attributes?.isMore && post?.attributes?.Message.length>10 ? 'Read More' : 'Read Less' }}</a> </div> 
      </div>
    </div>
1 голос
/ 29 мая 2020

Я настоятельно рекомендую вам использовать свойства word-wrap и text-overflow CSS.

Пример: https://codepen.io/doliG/pen/oNjrVBK

С angular функция переключения может просто изменить логическое значение 

class MyComponent {
  showFullText = false;

  toggle() {
    this.showFullText = !this.showFullText;
  }
}

А затем в шаблоне что-то вроде 

<p [class.something]="showFullText">{{ veryLongText }}</p>

Удачи.

1 голос
/ 29 мая 2020

Вы можете сделать что-то вроде: 

<p class="text-center">{{ post.attributes.Message.length <= 50 ? post.attributes.Message : post.attributes.Message.substring(0, 50) + '...' }}</p>

, если ваш текст содержит более 50 символов, тогда он будет отображать только 50 символов.

...