时间戳

首页 > 解决方案 > 无法通过订阅更改我的文本颜色

javascript - 无法通过订阅更改我的文本颜色

问题描述

我想通过服务和订阅更改文本的颜色，但我似乎无法让它正常工作？

我正在使用 [ngClass] 动态设置对“isActive”有效的字符，但我不知道为什么我不能让它工作？

目前，只有第一个字母被更改。另外...我希望更改由 [ngClass] 更改的突出显示字母的颜色。

堆栈闪电战

html

<div class="container">
  <div class="keys" *ngFor="let item of dataKeys">
    <div #text class="chars" *ngFor="let char of data[item]" [ngClass]="{'active': char.isActive}">
      {{char.name}}
    </div>
  </div>
</div>

零件

@ViewChild('text') private text: ElementRef;

  constructor(private service: SettingsService) {
  }

  ngOnInit() {
    this.subscribeToColour();
  }

  subscribeToColour() {
    this.service.getColour.subscribe(res => {
      if (this.text) {
        this.text.nativeElement.style.color = res;
      }
    });
  }

  get dataKeys() {
    return Object.keys(this.data);
  }

服务

export class SettingsService {
  default = 'green'
  colour = new BehaviorSubject<any>(this.default);

  setColour(colour) {
    this.colour.next(colour);
  }

  get getColour(): Observable<any> {
    return this.colour;
  }
}

标签： javascriptangulartypescript

解决方案

正如彼得所说，您捕获的“文本”视图子引用只是对您重复的第一个 div 的引用。

作为替代方案，您可以考虑将颜色添加到数据对象：

例如：{ "name": "a", "isActive": true, "color": "red", }

并在你的 html 文件中绑定到这个 - 你不应该自己操作 nativeElement 属性

然后，您将根据需要更新服务订阅者中数据对象中的属性

推荐阅读