Question

我将指令中的属性颜色添加到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＆amp; 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

在color或<tr>元素上使用CSS <td>属性是不正确的。您应在每个<p>内添加<td>标记，并在ngStyle个标记上使用<p>。

类似的东西：

<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>

为什么ngStyle不起作用

2 个答案: