为什么ngStyle不起作用

Question

我在指令中将属性color添加到ngStyle属性。 但ngStyle并未对元素应用任何样式。 编译器根本没有显示任何错误，控制台也没有。 我尝试了ngStyle的不同语法，但仍无法正常工作。

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

  import { Directive, ElementRef, OnInit, Renderer2, HostListener, Input } from '@angular/core'; // custom directive which changes background color for odd and even values of index @Directive({ selector: '[appChangecolor]' }) export class ChangecolorDirective implements OnInit { @Input() index: any; color: string; constructor(private elementRef: ElementRef, private render: Renderer2) { } // listnes to mouseenter event of the element on which custom directive is applied and calls the function @HostListener('mouseenter') bgColor() { if (this.index % 2 === 0) { // style set through Renderer2 and not by directly accessing DOM element. this.color = 'green'; } else { this.color = 'red'; } console.log(this.color); } // listens to the mouseleave event on the element on which directive is applied @HostListener('mouseleave') bgColorRm() { this.color = 'black'; console.log(this.color); } ngOnInit() { this.index += 1; } } 

  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { NgStyle } from '@angular/common'; import {CommonModule} from '@angular/common'; import { AppComponent } from './app.component'; // custom directive imported from the respective file import { ChangecolorDirective } from './changecolor.directive'; @NgModule({ declarations: [ AppComponent, ChangecolorDirective // custom directive declared as part of module ], imports: [ BrowserModule, CommonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

  <!-- table displaying values from objects in users array --> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Users Details</h3> </div> <div class="panel-body"> <section class="container"> <h2>User Details Table</h2> <table class="table table-hover"> <thead> <tr> <th>Index</th> <!-- looping thorugh array which contains keys of object and display as heading --> <th *ngFor='let key of keys'>{{key}}</th> </tr> </thead> <tbody> <!-- looping through the users array and displaying values with the index with custom directive applied--> <tr *ngFor='let user of users; index as i' appChangecolor [index]="i" [ngStyle]="{'color': color}"> <td>{{i+1}}</td> <td>{{user.firstName}}</td> <td>{{user.lastName}}</td> <td>{{user.email}}</td> </tr> </tbody> </table> </section> </div> </div> 

Answer 1

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

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>

然后尝试使用Renderer2和ElementRef

this.render.setStyle(this.elementRef, 'color', this.color);

使用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">

Answer 2

CSS color属性不适用于<tr>或<td>元素。 您应该在每个<td>内添加一个<p>标记，并在这些<p>标记上使用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>