我正在尝试根据数组中存在的值更改 [ngclass] 字段的值,但它没有按预期工作。html代码如下:
<ul>
<li [ngClass]="{active: uniqueIds == corporate }">
<a href="/questionnaire/">
<span class="icons">
<i class="fas fa-users"></i>
</span>
<span>Corporate</span>
</a>
</li>
<li id="dispatchLocations" [ngClass]="{active: uniqueIds == dispatchLocations}">
<a href="/questionnaire/three/">
<span class="icons">
<i class="fas fa-map-marked-alt"></i>
</span>
<span>Dispatch locations </span>
</a>
</li>
</ul>
在上面的代码uniqueIds
中是一个数组,填充如下:
private message = [];
private questionLiId: any;
liIds: Array<any>;
public uniqueIds : Array<any>;
constructor(private sharedMessage: ShareMessageService) {
this.liIds =[];
this.uniqueIds=[];
}
ngOnInit() {
this.sharedMessage.shareMessage$.subscribe((data) => {
this.message = data;
this.questionLiId=this.message[4];
setTimeout(()=>{
this.liIds.push(this.questionLiId);
this.uniqueIds =Array.from(new Set(this.liIds));
console.log("Unique Li Ids =>"+this.uniqueIds);
},0)
})
}
当我在控制台中看到唯一的 li id 时,打印如下:
Unique Li Ids =>corporate,dispatchLocations
当我检查 html 代码时,会显示以下内容:
<li _ngcontent-c4="" ng-reflect-ng-class="[object Object]">Corporate</li>
谁能帮我在 Angular 6 中解决这个问题?我无法更改 ngclass 的值。到目前为止,我已经尝试了以下解决方案:
[ngClass]="{active: uniqueIds.indexOf() == corporate }"
[ngClass]="{active: uniqueIds.contains == corporate }"
[ngClass]="{active: uniqueIds.container == corporate }"
[ngClass]="{active: uniqueIds.value == corporate }"
[ngClass]="{active: uniqueIds == corporate }"
[ngClass]="{uniqueIds == corporate ? 'active':'inactive }"
但以上都不适合我。