Javascript 角度：事件处理JS生成代码的问题或无法使用*ngfor向HTML生成代码添加类

我的问题如下：

我想在模式窗口中显示一些电台，而已选择的电台应为蓝色，未选择的电台应为灰色。 所有站点都位于一个名为“allStations”的数组中，已选择的站点位于“currentStations”中

但是，我对此有多个问题：

首先： 我要么在HTML中用*for循环生成这个，然后我就有问题了，我不能分配给每个类着色的类

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

{{st.name}}

我试图通过在openmodal（）函数中生成HTML来解决这个问题，该函数首先打开模式，而不是直接在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);
          }
        }
      }
    }
  }

openmodal（）{
此.modalService.open（“ov\u stations”）；
让输出=document.getElementById（“allstationsdiv”）；
让dealtwith=[]；
if（output.childElementCount==0）{
对于（var i=0；i“+this.allStations[i].name+”
”；
否则{
//诺赫·韦特·泰顿
对于（var j=0；j“+this.allStations[i].name+”
”；
dealtwith.push（this.allStations[i].id）；
//console.log（“选中：“+this.allStations[i].id+”，处理：“+dealtwith[i]）；
}//&&this.allStations[i].id！=dealtwith[i]
else if（this.currentStations[j].id！=this.allStations[i].id）{
output.innerHTML+=“
“+this.allStations[i].name+”
”；
dealtwith.push（this.allStations[i].id）；
//console.log（“notselected:+this.allStations[i].id+”和dealtwith[i]）；
}
console.log（dealtwith）；
console.log（this.allStations[i].id）；
}
}
}
}
}

（我知道这个循环还不起作用，但这不是我最关心的问题）

然而，现在，当我试图点击一个站点来访问这个函数时，它将改变它的类，它不再工作，这个函数也不会被调用。我猜这是因为我现在在JS中生成代码，而不是从HTML生成代码

我怎样才能解决这个问题？ 在上述条件下，有没有一种方法可以给p的正确等级？ 或者，有没有一种方法可以解决无法从JS获得点击功能的问题

我更喜欢后者，但如果第一个更容易，我也愿意尝试。

---

非常感谢您的时间。

使用ngClass指令（）将获得您想要的结果。例如： 在component.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.css中

.selected {
  color: blue
}

.notselected {
  color: grey
}

一般来说，您应该避免在angular中通过js生成html代码，因为angular本身就是这样做的

.selected {
  color: blue
}

.notselected {
  color: grey
}