Lesen Sie mehr für Winkel-2 mit ngFor

Question

<div class="row col-sm-12 col-xs-12"> 
     <h4><strong>{{project.title}}, {{project.location}}</strong></h4> 
     <h5>{{project.info}}</h5> 
     <h6 #textContent id="read-more {{ i }} ">Amaneties: {{project.amaneties}} </h6> 
     <div class="read-more-link"> 
     <a readMore [readMore-length]="100" [readMore-element]="textContent"> 
       <span class="less">Less <i class="fa fa-angle-left" aria-hidden="true"></i></span> 
       <span class="more">More <i class="fa fa-angle-right" aria-hidden="true"></i></span> 
      </a> 
     </div> 

Ich versuche, mehr für großen Text lesen, aber nicht mit diesen Richtlinien mit * ngFor jede Option arbeiten, um diesen

Answer 1

zu lösen Ich denke, die Frage die Räume in der ist ID-Attribut Ich konnte dies innerhalb von * ngFor tun. versuchen Sie dies id="read-more{{i}}". Hier ist mein Code:

<div *ngFor="let post of list;let i = index" [attr.data-index]="i"> 
<div class="postDescription"> 
     <p #textContent1 id="read-more{{i}}">{{post.name}}</p> 
     <div class="readMore read-more-link"> 
      <a readMore [readMore-length]="350" 
      [readMore-element]="textContent1"> 
      <span class="more">Continue reading</span></a> 
     </div> 
     </div> 
</div> 

I entfernt „Weniger lesen ...“ Funktionalität, da sie nicht für meine Anwendung erforderlich war.

Ich habe den Code der ngx-read-more-Bibliothek kopiert und ein wenig modifiziert. Im Grunde eine benutzerdefinierte Direktive statt das Paket zu installieren.

readmore.directive.ts

import { Directive, Input, ElementRef, AfterViewInit, OnChanges } from '@angular/core'; 

@Directive({ 
    selector: '[readMore]' 
}) 

export class ReadMoreDirective implements AfterViewInit, OnChanges { 
    @Input('readMore-length') private maxLength:  number; 
    @Input('readMore-element') private elementChange: HTMLElement; 

    private currentText: string; 
    private hideToggle: boolean = true; 
    private text:  string; 
    private isCollapsed: boolean = true; 

    constructor(private el: ElementRef) {} 

    /** 
    * @inheritDoc 
    */ 
    public ngAfterViewInit() { 
    this.text = this.elementChange.innerHTML; 
    this.toggleView(); 
    if (!this.hideToggle) { 
     this.el.nativeElement.classList.remove('hidden'); 
    } else { 
     this.el.nativeElement.classList.add('hidden'); 
    } 
    this.el.nativeElement.addEventListener('click', (event: MouseEvent) => { 
     event.preventDefault(); 
     this.toggleView(); 
    }); 
    } 

    /** 
    * @inheritDoc 
    */ 
    public ngOnChanges() { 
    if (this.text) { 
     this.toggleView(); 
    } 
    } 
    /** 
    * Toogle view - full text or not 
    */ 
    private toggleView(): void { 
    this.determineView(); 
    this.isCollapsed = !this.isCollapsed; 
    if (this.isCollapsed) { 
     this.el.nativeElement.querySelector('.more').style.display = "none"; 
     //this.el.nativeElement.querySelector('.less').style.display = "inherit"; 
    } else { 
     this.el.nativeElement.querySelector('.more').style.display = "inherit"; 
     //this.el.nativeElement.querySelector('.less').style.display = "none"; 
    } 
    } 

    /** 
    * Determine view 
    */ 
    private determineView(): void { 
    const _elementChange = document.getElementById(this.elementChange.id); 
    if (this.text.length <= this.maxLength) { 
     this.currentText = this.text; 
     _elementChange.innerHTML = this.currentText; 
     this.isCollapsed = false; 
     this.hideToggle = true; 
     return; 
    } 
    this.hideToggle = false; 
    if (this.isCollapsed === true) { 
     this.currentText = this.text.substring(0, this.maxLength) + '...'; 
     _elementChange.innerHTML = this.currentText; 
    } else if (this.isCollapsed === false) { 
     this.currentText = this.text; 
     _elementChange.innerHTML = this.currentText; 
    } 
    } 
}