Question

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

我正在使用[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;
  }
}

Answer 1

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

或者，您可以考虑将颜色添加到数据对象中：

例如： { “ name”：“ a”， “ isActive”：是， “红色”， }

并绑定到html文件中-您不应该自己真正操作nativeElement属性

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

Answer 2

#text仅指向div的{{1}}。因此，a仅更新this.text.nativeElement.style.color = res;的颜色。

我对您的代码做了一些修改：

a

my-comp.component.html

<div class="container"> <div class="keys" *ngFor="let item of dataKeys"> <div class="chars" *ngFor="let char of data[item]" [style.color]="char.isActive ? color : 'white'"> {{char.name}} </div> </div> </div>

my-comp.component.ts

请注意，我摆脱了color: string = 'white'; subscribeToColour() { this.service.getColour.subscribe(res => { this.color = res; }); }文件中的#text以及html文件中的条件块。

Answer 3

您似乎没有在代码中设置任何字符的.isActive变量。 #text无法正常工作。

我认为您可能使这一过程复杂化了。您只需在服务中设置颜色即可更改颜色，而无需预订任何值。

尝试类似的东西：

Tools > Save all on build

订阅无法更改文本的颜色

3 个答案: