Класс ngclass не работает должным образом в угловых 6 - PullRequest
Новая
       19

Класс ngclass не работает должным образом в угловых 6

0 голосов
/ 06 октября 2018

Я пытаюсь изменить значение поля [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)
    })
  }

Когда я вижу в консоли уникальные идентификаторынапечатано, как показано ниже: 

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 }"

Но ничего из вышеперечисленного не помогло мне.

Ответы [ 3 ]

0 голосов
/ 06 октября 2018

попробуйте вызвать метод из контроллера 

[ngClass]="getLiClass(uniqueIds, 'corporate')"

в контроллере.добавить эту функцию: 

   getLiClass(uniqueIds, testValue) {
     return uniqueIds.contains(testValue) ? 'active':'inactive';
   }
0 голосов
/ 06 октября 2018

попробуйте это .. потому что uniqueIds является массивом, вам нужно искать его индекс. Я думал, что это был более простой способ 

 <li [ngClass]="{'active': uniqueIds.indexOf('corporate')!= -1 }">

для получения дополнительной информации перейдите по этой ссылке https://angular.io/api/common/NgClass#ngclass

0 голосов
/ 06 октября 2018

corporate должно быть строкой: 

[ngClass]="{'active': uniqueIds.indexOf('corporate') !== -1 }"
...