Javascript 如何在innerHTML中显示动态数据

我想用javascript代码在angular 2中创建无限滚动。使用javascript很奇怪，但工作正常。我能够创建无限的静态html。 但我想将来自服务的动态数据推送到这个内部HTML。 下面是简单的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;
}

它正在显示

{{Title}}

在html中，但在控制台中，我可以看到Title的值

plz帮助

您可以使用

---

像so wrap.innerHTML+=`${Title}`

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

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

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

就像上面Biser Atanasov的回答一样，我只是提醒您不要错过报价更新

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

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

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

---

你为什么不在改变你的观点之前先考虑一下标题的价值呢？比如：

wrap.innerHTML+=+Title+

---

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

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

请务必阅读以下内容：

你为什么不用棱角分明的方式呢

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

---

使用document.getElementById添加HTML代码绝对不是Angular的工作方式。您尝试过编译吗？还是应用？他应该先尝试理解Angular，而不是编译添加了document.getElementById的HTML模板。@阿尔瓦罗图桑是的，我可以在控制台中看到标题。但它不能在html中呈现。{{Title}这意味着您应该在控制台中出现一些致命错误。。。Angular不起作用它帮不上我的忙它仍在用HTML显示${Title}你确定你在使用->`，而不是->'