错误 _renderer.setElementStyle "Cannot set property 'background-color' of undefined in [null]"

Question

我正在 udemy 课程学习 angular2 angular2 , 老师写了一条指令，突出显示 html 元素。

我想休假，但对我来说 _renderer.setElementStyle 抛出异常。

EXCEPTION: TypeError: Cannot set property 'background-color' of undefined in [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>
`,

教师工作区：

谁能发现我做错了什么？

谢谢。

Answer 1

根据@NirSchwartz 的建议

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

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

您可以在他们的 CHANGELOG. Specifically to your case you should check the changelog for beta.1（重大更改部分）

中查看所有这些更改

Answer 2

查看教师工作区的第 10 行：
private _defaultColor:'red'; //不起作用；
private _defaultColor ='red'; // 工作；
当然，在第 16 行

中使用表达式
this._renderer.setElementStyle(this._elmRef.nativeElement, "background-color", this._defaultColor);

Answer 3

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

 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');

我还是不知道为什么

Answer 4

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

这不起作用，因为您实际上从未设置属性 _defaultColor 的 VALUE。请记住，TypeScript 中冒号后的部分是属性 TYPE，而不是值。 例如（坚持指定变量类型）:

private _defaultColor: string = 'green';

这很好用（我个人更喜欢使用这种语法，即使没有它，属性将默认为字符串）。

错误 _renderer.setElementStyle "Cannot set property 'background-color' of undefined in [null]"

Error _renderer.setElementStyle "Cannot set property 'background-color' of undefined in [null]"

html

angular

angular2-template

angular2-directives

angular2-forms