Ngclass не работает должным образом в angular 6

Я пытаюсь изменить значение поля [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 и dispatchLocations? это струны? члены класса компонента?

Jota.Toledo 06.10.2018 10:49
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
1
1 682
3

Ответы 3

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

Другие вопросы по теме