无法更改订阅文本的颜色
无法更改订阅文本的颜色
提问于 2018-09-18 21:11:31
我想用一个服务和订阅来改变我的文本的颜色，但是我似乎不能让它正常工作？
我使用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;
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-09-18 21:25:35
正如Peter所说，您捕获到的对"text“的视图子引用只是对重复的第一个div的引用。
作为另一种选择，您可以考虑向数据对象添加颜色：
{“名称”："a"，"isActive"：true，"color"："red"，}
绑定到html文件中--您不应该亲自操作nativeElement属性。
然后，您将酌情更新服务订阅服务器中数据对象中的属性。
Stack Overflow用户
发布于 2018-09-18 21:22:11
#text只指向div for 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以及ts文件中的条件块。
Stack Overflow用户
发布于 2018-09-18 21:27:21
您似乎没有在代码中设置任何字符的.isActive变量。那个#文本不是你想要的效果。
我想你可能把事情搞得太复杂了。只需在服务中设置颜色即可更改颜色，而无需订阅值。
试一试如下：
<div class="container">
<div class="keys" *ngFor="let item of dataKeys">
<div class="chars" *ngFor="let char of data[item]" [ngClass]="{'active': getColour(char.isActive)}">
{{char.name}}
</div>
</div>
</div>
export class SettingsService {
getColour(boolean): string {
if (boolean == true) {
return 'green'; // whatever colour you want.
} else {
return 'red' // whatever you want
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52394648
复制相关文章
相似问题
腾讯云开发者
