错误 _renderer.setElementStyle “无法在 [null] 中设置未定义的属性‘背景颜色’”

Posted 2023-02-22

【中文标题】错误 _renderer.setElementStyle “无法在 [null] 中设置未定义的属性‘背景颜色’”

【英文标题】：Error _renderer.setElementStyle "Cannot set property 'background-color' of undefined in [null]"

【发布时间】：2016-06-02 21:28:44

【问题描述】：

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

我试图做休闲，但对我来说 _renderer.setElementStyle 抛出异常。

例外：类型错误：无法设置属性“背景颜色” 在 [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>
`,

教师工作区：

谁能发现我做错了什么？

谢谢。

【问题讨论】：

从 beta.1 开始，您应该将 nativeElement 而不是 ElementRef 传递给渲染器。您使用的是哪个 angular2 版本？无论如何，错误听起来与此无关，您确定这就是您的全部代码吗？

@Eric Martinez 我正在使用“angular2”：“2.0.0-beta.3”，我试过你的回答，它有效，谢谢。我在哪里可以找到 angular2 在 beta 之间所做的所有更新？您想添加您的推荐作为对任何人的回答还是我应该更新我的问题？

让我添加它作为答案

@Eric Martinez 再次感谢您，您知道我在哪里可以找到 angular2 在 beta 之间所做的所有更新吗？

@NirSchartz 不客气。正如我在答案中添加的那样，您可以在更改日志中检查所有这些更改。

【参考方案1】：

正如@NirSchwartz 建议的那样

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

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

您可以在他们的CHANGELOG 中查看所有这些更改。具体到您的情况，您应该检查beta.1 的更改日志（重大更改部分）

【参考方案2】：

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

【参考方案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');

我还是不知道为什么

【参考方案4】：

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

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

private _defaultColor: string = 'green';

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