Я пытаюсь изменить значение поля [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.info("Unique Li Ids =>"+this.uniqueIds);
},0)
})
}
Когда я вижу в консоли уникальные идентификаторы, печатаются, как показано ниже:
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 }"
Но ничего из вышеперечисленного у меня не сработало.





corporate должен быть строкой:
[ngClass] = "{'active': uniqueIds.indexOf('corporate') !== -1 }"
попробуйте вызвать метод из контроллера
[ngClass] = "getLiClass(uniqueIds, 'corporate')"
в контроллере. добавить эту функцию:
getLiClass(uniqueIds, testValue) {
return uniqueIds.contains(testValue) ? 'active':'inactive';
}
попробуйте это .. поскольку uniqueIds - это массив, вам нужно выполнить поиск по его индексу. Я думал, что это более простой способ
<li [ngClass] = "{'active': uniqueIds.indexOf('corporate')!= -1 }">
для получения дополнительной информации перейдите по этой ссылке https://angular.io/api/common/NgClass#ngclass
что такое
corporateиdispatchLocations? это струны? члены класса компонента?