如何在 innerHTML 中显示动态数据答案

【问题标题】：How to show the dynamic data in innerHTML如何在 innerHTML 中显示动态数据
【发布时间】：2017-07-31 08:31:55
【问题描述】：

我想使用 javascript 代码在 angular 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 的值。

请帮忙

【问题讨论】：

使用document.getElementById 添加 HTML 代码绝对不是 Angular 的工作方式。
你试过编译吗？还是申请？
他应该先尝试了解Angular，而不是编译用document.getElementById添加的HTML模板。
@ÁlvaroTouzón 是的，我可以在控制台中看到标题。但它没有在 html 中呈现。
{{Title}} 这意味着您应该在控制台中有一些致命错误... Angular 不工作

标签： javascript html angular innerhtml

【解决方案1】：

您可以使用interpolate string。

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

【讨论】：

它没有帮助我它仍然在 html 中显示 ${Title}
你确定你使用的是 -> ` ，而不是 -> '

【解决方案2】：

您应该将引号字符从 ' 更改为“`”，并像这样使用变量 ${Title}：

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

就像上面 Biser Atanasov 的回答一样，我只是注意确保您不会错过报价更新。

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

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

【讨论】：

【解决方案3】：

为什么在改变你的观点之前你不只是 Title 的值？类似的东西：

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

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

【讨论】：

【解决方案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]);
  }
}

【讨论】：