Question

我在Angular面临着奇怪的行为。我想根据来自数据库的信息呈现div和样式。

模板

<div *ngFor="let app of apps" >
  <div appApplicationColor [name]="app.name.az">
    <a href="{{app.url}}?token={{token}}" target="_blank">
    <p>{{app.name.az}} </p>
    </a>
  </div>
</div>

App.name.az =“Əlavə”，“LMS”，“MHS” 和appApplicationColor指令是

组件

@Directive({
  selector: '[appApplicationColor]'
})
export class ApplicationColorDirective implements OnInit, OnDestroy {
  @Input() name: string;
  constructor(private elementRef: ElementRef , private renderer: Renderer2) 
  {
  }

  ngOnInit() {
    if (this.name = 'Əlavə') {
      this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'yellow');
    } else if (this.name = 'LMS') {
      this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'red');
    } else if (this.name = 'MHS') {
      this.renderer.setStyle(this.elementRef.nativeElement, 'background-color' , 'green');
    } else {
      this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'blue');
    }
    console.log(this.name)
  }
}

问题是所有div都变成黄色而不是app.name.az。奇怪的是，当我检查div [name]和app.url时，每个都不同。控制台输出'Əlavə'3次，这意味着angular指令不会动态地改变[name]属性。

Answer 1

这是因为在你的支票中你正在使用

if (this.name = 'Əlavə') {

这实际上将设置为'Əlavə' - 你应该使用===（参见：Difference between == and ===）

if (this.name === 'Əlavə') {

但在这种情况下，你可能会更好地使用像这样的switch statement

switch (this.name) {
  case 'Əlavə': 
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'yellow');
    break;
  case 'LMS': 
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'red');
    break;
  case 'MHS': 
    break;
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color' , 'green');
    break;
  default:
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'blue');
}

Here is a live plunker demo fixing the problem

Angular 4将相同的指令应用于迭代中的所有div

1 个答案: