Angular: проблемы с обработкой событий с JS сгенерированным кодом или невозможностью добавить классы к HTML сгенерированному коду с * ngfor

Question

Моя проблема заключается в следующем:

У меня есть станции, которые я хочу отобразить в модальном окне, тогда как уже выбранные станции должны быть окрашены в синий цвет, а невыбранные - в серый. Все станции находятся в массиве, называемом «allStations», а уже выбранные станции находятся в «currentStations».

Однако у меня много проблем с этим:

Во-первых: я либо генерирую это в HTML с * для l oop, тогда у меня проблема в том, что я не могу назначить классы, которые должны окрашивать каждый из них.

<jw-modal id="ov_stations">
 <div id="allstationsdiv">
   <p *ngFor="let st of allStations" id="{{ st.id }}" class="notselected"(click)="onstationclick({{st.id}})"> 
       {{ st.name }}
   </p>
 </div>
 <span (click)="closemodal()"><img src="../../../../assets/icons/x.png" alt=""></span>
</jw-modal>

Я попытался решить эту проблему, сгенерировав HTML внутри функции openmodal (), которая сначала открывает модал, а не непосредственно в HTML:

openmodal(){
    this.modalService.open("ov_stations");

    let output = document.getElementById("allstationsdiv");
    let dealtwith = [];

    if (output.childElementCount == 0){
      for (var i = 0; i < this.allStations.length; i++){
        if (this.currentStations.length == 0)
          output.innerHTML += "<p id='" + this.allStations[i].id + "' class='notselected' (click)='onstationclick(" + this.allStations[i].id + ")'>" + this.allStations[i].name + "</p>";
        else {
          // noch weiter testen
          for (var j = 0; j < this.currentStations.length; j++){
            if (this.currentStations[j].id == this.allStations[i].id){
              output.innerHTML += "<p id='" + this.allStations[i].id + "' class='selected' (click)='onstationclick(" + this.allStations[i].id + ")'>" + this.allStations[i].name + "</p>";
              dealtwith.push(this.allStations[i].id);
              // console.log("selected: " + this.allStations[i].id + " and dealt with: " + dealtwith[i]);
            } // && this.allStations[i].id != dealtwith[i]
            else if (this.currentStations[j].id != this.allStations[i].id){
              output.innerHTML += "<p id='" + this.allStations[i].id + "' class='notselected' (click)='onstationclick(" + this.allStations[i].id + ")'>" + this.allStations[i].name + "</p>";
              dealtwith.push(this.allStations[i].id);
              // console.log("notselected: " + this.allStations[i].id + " and dealt with: " + dealtwith[i]);
            }
            console.log(dealtwith);
            console.log(this.allStations[i].id);
          }
        }
      }
    }
  }

(я знаю, что l oop не работает пока, но это не моя непосредственная задача)

Однако теперь, когда я пытаюсь нажать на станцию, чтобы получить доступ к функции, которая изменит ее класс, она больше не работает, функция не вызывается , Я предполагаю, что это потому, что теперь я генерирую код внутри JS вместо HTML.

Как я могу решить эту проблему? Есть ли способ дать p правильный класс с условиями выше? Или есть способ решить проблему невозможности заставить функцию щелчка работать с JS?

Я бы предпочел второе, но если первое проще, я готов попробовать это тоже. Большое спасибо за ваше время.

Answer 1

Использование директивы ngClass (https://angular.io/api/common/NgClass) даст вам результат, который вы ищете. Например: в вашем компоненте. html

 <div id="allstationsdiv">
            <p *ngFor="let st of allStations" 
               [ngClass]="{
                            'selected':isStationSelected(st),
                            'notselected':!isStationSelected(st)
                          }" 
               (click)="onstationclick(st.id)"> 
               {{ st.name }}
           </p>
        </div>

в вашем файле component.ts

export class MyComponent {

  allStations = [
    { id: 1, name: "station 1" },
    { id: 2, name: "station 2" },
    { id: 3, name: "station 3" },
    { id: 4, name: "station 4" },
    { id: 5, name: "station 5" }
  ];
  selStations = [{ id: 3, name: "station 3" }, { id: 4, name: "station 4" }];

  onstationclick(station): void {
    //do something here
  }

   // will check to see if the currentStations array contains the station id you 
   // are passing from the all stations array 
  isStationSelected(station): boolean {
    return this.currentStations.some(st=> st.id === station.id);
  }
}

в вашем компоненте. css

.selected {
  color: blue
}

.notselected {
  color: grey
}

Как правило, вы должны избегать генерации html кода через js в angular, так как для этого у вас есть angular.