错误_renderer.setElementStyle"无法设置属性' background-color'未定义的[null]"

时间:2016-02-21 13:52:09

标签: html angular angular2-template angular2-directives angular2-forms

我在 udemy 课程中为 angular2 学习 angular2 ,老师写了一个突出显示的指令一个HTML元素。

我试着休息,但对我来说 _renderer.setElementStyle 会抛出异常。

  

EXCEPTION:TypeError:无法设置属性' background-color'的   在[null]中未定义

指令:

import {Directive, ElementRef, Renderer, OnInit} from 'angular2/core';

@Directive({
    selector: '[highlight-directive]'
})

export class HighlightDirective implements OnInit{
    private _defaultColor= 'green';

    constructor(private _elmRef: ElementRef, private _renderer: Renderer) {}

    ngOnInit(): any {
        this._renderer.setElementStyle(this._elmRef, "background-color", this._defaultColor);
        //this._elmRef.nativeElement.style.backgroundColor = this._defaultColor; //this way works fine.
    }
}

我使用指令的模板:

template: `
    <div highlight-directive>
        Highlight me
    </div>
    <br>
    <div highlight-directive>
        2 Highlight me 2
    </div>
`,

教师工作区: enter image description here

任何人都可以找到我做错的事吗?

感谢。

4 个答案:

答案 0 :(得分:19)

正如@NirSchwartz

所建议的那样

由于beta.1渲染器不再使用ElementRef,而是nativeElement,因此添加背景颜色的渲染器行应如下所示

this._renderer.setElementStyle(this._elmRef.nativeElement, "background-color", this._defaultColor);

您可以在CHANGELOG中查看所有这些更改。特别针对您的情况,您应该检查beta.1(更改部分)

的更改日志

答案 1 :(得分:3)

查看教师工作区的第10行:
private _defaultColor:'red'; //无法工作;
private _defaultColor ='red'; //工作;
当然,在第16行使用表达式{this._renderer.setElementStyle(this._elmRef.nativeElement, "background-color", this._defaultColor);

答案 2 :(得分:2)

提供的答案对我不起作用我必须改变

 private _defaultColor :'green';

 private _defaultColor ='green';

我也意识到改变以下内容也有效

 this._renderer.setElementStyle(this._elRef.nativeElement, 'background-color', this._defaultColor);

 this._renderer.setElementStyle(this._elRef.nativeElement, 'background-color', 'green');

我仍然不知道为什么

答案 3 :(得分:1)

private _defaultColor :'green';
this._renderer.setElementStyle(this._elRef.nativeElement, 'background-color', this._defaultColor);

这不起作用,因为您实际上从未实际设置属性_defaultColor的值。请记住,TypeScript中冒号后面的部分是属性TYPE,而不是值。 例如(并且是关于指定变量类型的坚持者)

private _defaultColor: string = 'green';

这很好用(我个人更喜欢使用这种语法,即使没有它,属性也会默认为字符串)。