angular追加html,Angular2将HTML添加到动态元素

我有以下代码：

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

@Component({

selector: 'my-app',

template: 'Run

})

export class AppComponent{

hostEl: any;

constructor(

private el:ElementRef,

private renderer:Renderer2,

) {

this.hostEl = el.nativeElement;

}

runR(){

let change_this;

change_this= this.renderer.createElement('span');

this.renderer.addClass(change_this, 'change_this');

this.renderer.appendChild(this.hostEl, change_this);

}

}

Angular2中 有什么方法可以将HTML添加到中.dynamically_created_div吗？因为上述内容仅添加到组件HTML的末尾。

我也尝试过：

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

@Component({

selector: 'my-app',

template: `Run

`,

})

export class AppComponent {

constructor(private renderer:Renderer) {}

runR() {

@ViewChild('dynamically_created_div') d1:ElementRef;

this.renderer.invokeElementMethod(this.d1.nativeElement, 'insertAdjacentHTML', ['beforeend', '

new_div

'] );

}

}

但这是行不通的，因为@ViewChild指令必须在函数之外，我再也无法控制它了

我也这样尝试过：

this.newHTML = '

new_div

';

我不能做的事情是因为我的内容是动态的并且使用唯一的ID，并且我不能动态使用[innerHtml](它仅适用于我第一次放入它们的面板，然后其他任何更改都不能再使用innerHtml。

我检查了Angular2：在DOM中将动态组件作为容器的子代插入，但是存在相同的问题，占位符不是动态的

更新：

我的代码稍微复杂一点：

TS：

import { AfterContentInit, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';

import { NgForm, FormsModule, ReactiveFormsModule, FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';

import { SFService } from '../services/sf.service';

import { Injectable, Pipe, PipeTransform } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

providers: [ SFService ],

})

export class AppComponent implements OnInit {

constructor(

private sfservice: SFService,

) {}

ngOnInit(){

this.sfservice.getMembers().subscribe(members => {

this.members = members.members;

});

}

members: Member[];

member_selector: Member[];

member_each: Member;

member_selector_each: Member[];

cases: Case;

runR(){

this.members.forEach(member_each => {

this.member_selector.forEach(member_selector_each => {

if(member_each.Id === member_selector_each.Id){

console.log(member_selector_each.Id);

this.sfservice.getCaseHistory(member_selector_each.Id, "2017-04-25T00:00:00", "2017-04-28T23:59:59").subscribe(cases => {

this.member_each['cases'] = cases;

console.log(this.member_each);

});

}

})

})

}

}

HTML：

{{member.Name}}

Run

{{case.Number}}

我只是尝试使用，ngFor但现在我得到了

Cannot set property 'cases' of undefined