使用 ngFor 阅读有关 angular-2 的更多信息

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>

我正在尝试为大文本阅读更多内容，但这不适用于 *ngFor 任何解决此问题的选项的指令

Answer 1

我认为问题在于 id 属性中的空格。我能够在 *ngFor 中做到这一点。试试这个id="read-more{{i}}"。 这是我的代码：

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

我删除了“少读...”功能，因为我的应用不需要它。

我复制了 ngx-read-more 库的代码并稍作修改。基本上做了一个自定义指令而不是安装包。

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