Angular2 Typescript2:对类属性的更改未反映在DOM对象中

我试图动态地向DOM中添加一个对象，但似乎无法在DOM中显示对类属性所做的任何更改。另外，我似乎无法更改DOM对象上的类名

单击时，我会登录到控制台，调用“clicked”方法，但style.top和style.left不会更改。class属性也没有。我只是看到：

<div ng-reflect-class-name="marker" class="marker">...</div>

下面是我尝试动态添加的对象：

marker.ts

import { Component, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

import { Marker } from './marker';

@Component({
  selector: 'page',
  templateUrl: 'page.html'
})
export class MyPage {
  constructor(private vcRef: ViewContainerRef, private resolver: ComponentFactoryResolver) {

  }
  clicked(e: MouseEvent) {
    const factory = this.resolver.resolveComponentFactory(Marker);
    let component = this.vcRef.createComponent(factory, 1, this.vcRef.injector);
    component.instance.place(0,0, 50, 0, 150);
  }
}

import { Component } from '@angular/core';

@Component({
    selector: '.markers',
    templateUrl: 'marker.html'
})
export class Marker {
  protected left: number;
  protected bottom: number;
  protected class: string;
  protected form: any;

  constructor() {
      this.class = "marker";
      this.form = {
        x: 0,
        y: 0,
        title: ''
    }
  }

  place(percentX: number, percentY: number, x: number, y: number, width: number) {
    console.log("placing");
    this.form.x = percentX;
    this.form.y = percentY;
    this.left = x;
    this.bottom = y;
    if (x < width / 2) {
      this.class = "marker right";
    } else {
      this.class = "marker left";
    }
  }
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：'.markers'，
templateUrl:'marker.html'
})
导出类标记{
保护左：数字；
保护底部：数字；
保护类：字符串；
受保护形式：任何；
构造函数（）{
this.class=“marker”；
此.form={
x:0,，
y:0，
标题：“”
}
}
位置（百分比x:编号，百分比y:编号，x:编号，y:编号，宽度：编号）{
控制台日志（“放置”）；
此.form.x=百分比x；
此.form.y=百分比；
这个左=x；
这个。底部=y；
如果（x<宽度/2）{
this.class=“marker right”；
}否则{
this.class=“marker left”；
}
}
}

marker.html

<div [class]="class" [style.left]="left" [style.bottom]="bottom">
    <ion-input class="input-title" type="text" placeholder="Title" [(ngModel)]="form.title"></ion-input>
</div>

这个Angular2 n00b有什么提示吗？

我最终使用“Renderer”和“ElementRef”对象来进行样式和类操作。我不认为这是正确的方式来使用打字脚本-它似乎围绕一些事情-但这是我如何让它工作

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

@Component({
    selector: "marker",
    templateUrl: 'marker.html'
})
export class PainStatusMarker {
  protected form: any;

  constructor(public element: ElementRef, public renderer: Renderer) {
      this.form = {
        x: 0,
        y: 0,
        title: ''
    }
  }

  place(percentX: number, percentY: number, x: number, y: number, width: number) {
    this.form.x = percentX;
    this.form.y = percentY;
    this.renderer.setElementStyle(this.element.nativeElement, "bottom", (-1 * y) + 'px');
    if (x < width / 2) {
      this.renderer.setElementClass(this.element.nativeElement, "right", true);
    }
  }
}

从'@angular/core'导入{Component，ElementRef，Renderer}；
@组成部分({
选择器：“标记器”，
templateUrl:'marker.html'
})
导出类状态标记{
受保护形式：任何；
构造函数（公共元素：ElementRef，公共呈现器：呈现器）{
此.form={
x:0,，
y:0，
标题：“”
}
}
位置（百分比x:编号，百分比y:编号，x:编号，y:编号，宽度：编号）{
此.form.x=百分比x；
此.form.y=百分比；
this.renderer.setElementStyle（this.element.nativeElement，“底部”（-1*y）+“px”）；
如果（x<宽度/2）{
this.renderer.setElementClass（this.element.nativeElement，“right”，true）；
}
}
}

希望这能帮助其他刚接触Angular2和Typescript的人，我最终使用了“Renderer”和“ElementRef”对象来进行样式和类操作。我不认为这是正确的方式来使用打字脚本-它似乎围绕一些事情-但这是我如何让它工作

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

@Component({
    selector: "marker",
    templateUrl: 'marker.html'
})
export class PainStatusMarker {
  protected form: any;

  constructor(public element: ElementRef, public renderer: Renderer) {
      this.form = {
        x: 0,
        y: 0,
        title: ''
    }
  }

  place(percentX: number, percentY: number, x: number, y: number, width: number) {
    this.form.x = percentX;
    this.form.y = percentY;
    this.renderer.setElementStyle(this.element.nativeElement, "bottom", (-1 * y) + 'px');
    if (x < width / 2) {
      this.renderer.setElementClass(this.element.nativeElement, "right", true);
    }
  }
}

从'@angular/core'导入{Component，ElementRef，Renderer}；
@组成部分({
选择器：“标记器”，
templateUrl:'marker.html'
})
导出类状态标记{
受保护形式：任何；
构造函数（公共元素：ElementRef，公共呈现器：呈现器）{
此.form={
x:0,，
y:0，
标题：“”
}
}
位置（百分比x:编号，百分比y:编号，x:编号，y:编号，宽度：编号）{
此.form.x=百分比x；
此.form.y=百分比；
this.renderer.setElementStyle（this.element.nativeElement，“底部”（-1*y）+“px”）；
如果（x<宽度/2）{
this.renderer.setElementClass（this.element.nativeElement，“right”，true）；
}
}
}

希望这能帮助那些不熟悉Angular2和打字的人