Javascript 为什么ngStyle不起作用

我将指令中的属性颜色添加到ngStyle属性中。但是ngStyle没有将任何样式应用于元素。编译器和控制台都没有显示任何错误。我尝试了ngStyle的不同语法，但仍然不起作用

我也在下面添加了app.modules代码。加载模块时是否存在任何问题

import{Directive，ElementRef，OnInit，renderr2，HostListener，Input}来自“@angular/core”；
//更改索引奇数和偶数值背景色的自定义指令
@指示({
选择器：“[appChangecolor]”
})
导出类ChangecolorDirective实现OnInit{
@Input（）索引：任意；
颜色：字符串；
构造函数（private-elementRef:elementRef，private-render:render2）{}
//应用自定义指令的元素的listnes to mouseenter事件，并调用函数
@HostListener（'mouseenter'）bgColor（）{
if（this.index%2==0）{
//通过RenderR2而不是直接访问DOM元素来设置样式。
this.color='green'；
}否则{
this.color='red'；
}
console.log（this.color）；
}
//侦听应用指令的元素上的mouseleave事件
@HostListener（'mouseleave'）bgColorRm（）{
this.color='black'；
console.log（this.color）；
}
恩戈尼尼特（）{
该指数+=1；
}
}

从'@angular/platform browser'导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从“@angular/common”导入{NgStyle}；
从“@angular/common”导入{CommonModule}；
从“./app.component”导入{AppComponent}；
//从相应文件导入的自定义指令
从“./changecolor.directive”导入{ChangecolorDirective}；
@NGD模块({
声明：[
应用组件，
ChangecolorDirective//作为模块的一部分声明的自定义指令
],
进口：[
浏览器模块，
公共模块
],
提供者：[]，
引导：[AppComponent]
})
导出类AppModule{}

用户详细信息
用户详细信息表
指数
{{key}}
{{i+1}}
{{user.firstName}
{{user.lastName}
{{user.email}
在
或
元素上使用的CSS
颜色属性不正确。您应该在每个
内添加
标记，并在这些
标记上使用
ngStyle

比如：

<tr *ngFor='let user of users; index as i' appChangecolor [index]="i">
  <td><p [ngStyle]="{'color': color}">{{i+1}}</p></td>
  <td><p [ngStyle]="{'color': color}">{{user.firstName}}</p></td>
  <td><p [ngStyle]="{'color': color}">{{user.lastName}}</p></td>
  <td><p [ngStyle]="{'color': color}">{{user.email}}</p></td>
</tr>


{{{i+1}

{{{user.firstName}

{{{user.lastName}

{{{user.email}

为什么需要指令，请尝试在组件中执行：

onMouseEnter(index) {
  if (index % 2 === 0) {
    this.color = 'green';
   } else {
    this.color = 'red';
   }
}

onMouseLeave() {
   this.color = 'black';
}

模板

<tr *ngFor='let user of users; index as i' (mouseenter)="onMouseEnter(index)" (mouseleave)="onMouseLeave()" [ngStyle]="{'color': color}">
<td>{{i+1}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
</tr>

对于ngStyle，我现在无法测试它，但我认为您必须拥有EventEmitter。这是一个简单的例子，只是给出一个方向

@Output colorChanged: EventEmitter = new EventEmitter<string>();

@HostListener('mouseenter') bgColor() {
   ....
    this.colorChanged.emit(this.color);
   ....
}

@HostListener('mouseleave') bgColor() {
   ....
    this.colorChanged.emit(this.color);
   ....
}

<tr *ngFor='let user of users; index as i' appChangecolor [index]="i" [ngStyle]="{'color': color}" (colorChanged)="this.color=$event">

@Output colorChanged:EventEmitter=neweventemitter（）；
@HostListener（'mouseenter'）bgColor（）{
....
this.colorChanged.emit（this.color）；
....
}
@HostListener（'mouseleave'）bgColor（）{
....
this.colorChanged.emit（this.color）；
....
}
这是需要通过Directive完成的挑战如果您使用rendere2，那么您就不会使用ngStyle了？当然，您不会需要它！那部分也来自challange吗；]]但问题是，我必须通过一个指令使用ngStyle，为什么您需要一个Eventemitter。为什么颜色属性不能绑定到ngstyle呢？您在指令中保留了颜色属性。应将该值发射到构件以更新样式
@Output colorChanged: EventEmitter = new EventEmitter<string>();

@HostListener('mouseenter') bgColor() {
   ....
    this.colorChanged.emit(this.color);
   ....
}

@HostListener('mouseleave') bgColor() {
   ....
    this.colorChanged.emit(this.color);
   ....
}

<tr *ngFor='let user of users; index as i' appChangecolor [index]="i" [ngStyle]="{'color': color}" (colorChanged)="this.color=$event">