Question

我想使用javascript代码在角度2中创建无限滚动（使用javascript很奇怪，但它工作正常）。我能够创建无限的静态HTML。但我想将来自服务的动态数据推送到这个innerHtml。以下是简单的JavaScript代码。

@HostListener("window:scroll", [])
onWindowScroll() {
    this.yHandler(); 
}
public yHandler() {
    this.numberincrem++;
    console.log(this.numberincrem);
    var Title = this.PostTitle;
    console.log(Title);
    var wrap = document.getElementById('wrap');
    var contentHeight = wrap.offsetHeight;
    var yOffset = window.pageYOffset;
    var y = yOffset + window.innerHeight;
    if (y >= contentHeight) {

        wrap.innerHTML += '<div class="newData">{{Title}}</div>';
    }
    var status = document.getElementById('status');
    status.innerHTML = contentHeight + " | " + y;
}

显示

{{名称}}

在html中但在控制台中我能够看到Title的值。

plz help

Answer 1

您可以使用interpolate string。

像JsonViewResponseBodyAdvice

一样

Answer 2

您应该将引号字符从'更改为“`”，并使用变量$ {Title}，如下所示：

wrap.innerHTML += `<div class="newData">${Title}</div>`;

就像上面Biser Atanasov的回答一样，我注意到你确定不要错过报价更新。

或者您可以在添加变量后剪切字符串并将其合并，如下所示：

wrap.innerHTML += '<div class="newData">' + Title + '</div>';

Answer 3

为什么在更改视图之前，不仅仅是Title的值？类似的东西：

wrap.innerHTML += '<div class="newData">' + Title + '</div>';

当然，您无法动态更改它。但这就是你决定使用document.getElementById ...

的方式

Answer 4

您不应该直接更改元素innerHtml，如果您打算这样做，不要使用Angular 2，调用document对象并更改innerHtml肯定会破坏您的应用程序上的服务器端呈现更改检测将无法应用您使用innerHtml添加的新更改。

请务必阅读： https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

相反，为什么不以棱角分明的方式做呢？

import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';

// declare window object so can typescript know it's there.
declare const window: Window;

@Component({
  selector: 'someapp',
  template: `
    <div #wrap class="newData" *ngFor="let title of titles">
      {{title}}
    </div>

    <div id="status">
      {{heights.implode('|')}}
    </div>
  `
})
export class AppComponent implements OnInit {
  public titles: string[] = [];
  public postTitle: string;
  public heights: number[] = [];
  public numberincrem: number = 0;
  // instead of using document to fetch the elements directly from the dom use ViewChild to get the element the Angular way.
  @ViewChild('wrap') public wrap: ElementRef;

  @HostListener('window:scroll', [])
  onWindowScroll() {
    this.yHandler();
  }

  /// ... declare and define onInit

  public yHandler() {
    // use let instead of var for better variables scoping.
    let contentHeight = this.wrap.nativeElement.offsetHeight;
    let yOffset = window.pageYOffset;
    let y = yOffset + window.innerHeight;
    if (y >= contentHeight) {
      // use concat to enforce new reference for title array to make it easier on change detection to detect the changes.
      this.titles = [].concat(this.titles, [this.postTitle]);
    }
    this.heights = [].concat(this.heights, [contentHeight]);
  }
}

如何在innerHTML中显示动态数据

4 个答案: