在模式中单击图标时如何更改元素的样式？

Question

我用 mdbModal 创建了一个模态，在我的模态中有 4 个图标，如下图所示。

我希望当我点击每个图标时，圆圈的背景颜色和图标的边框颜色会发生变化。这是我的模态代码：

<div mdbModal #addSocialModal="mdbModal" class="modal fade top" id="addSocialModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered" style="justify-content: center; max-width: 100%"
       role="document">
    <div class="modal-content addSocialModal-size modal-lg"
         style="text-align: center">


      <form [formGroup]="createProjectForm" (ngSubmit)="onAddSocial()">

        <div class="modal-body mx-3 d-rtl" style="margin-top: 50px;margin-bottom: 10px">

          <a class="socialProject icon-instagram" id="instagramm" #instagramm
             (click)="onClickSocial('instagram')"
             style="border: 1px solid #b913bd"></a>
          <a class="socialProject icon-telegram" id="telegram"
             (click)="onClickSocial('telegram')"
             style="border: 1px solid #19b4ff"></a>
          <a class="socialProject icon-linkedin" id="linkedin"
             (click)="onClickSocial('linkedin')"
             style="border: 1px solid #004a73"></a>
          <a class="socialProject icon-twitter" id="twitter"
             (click)="onClickSocial('twitter')"
             style="border: 1px solid #95d8fe"></a>

        </div>

        <li class="create-project-btn-position d-rtl">

          <button class="btn cancel-btn" (click)="addSocialModal.hide()">
            لغو
          </button>
          <button [disabled]="!createProjectForm.valid" type="submit" class="btn create-project-btn">
            اتصال اکانت
          </button>

        </li>

      </form>
    </div>
  </div>
</div>

这是我的 component.ts onClickSocial 方法代码：

onClickSocial(social) {

    if (social === 'instagram') {

      document.getElementById('instagramm').style.backgroundColor = 'red';
    }
    }

但这是行不通的。当我测试此代码而不是模态时它可以工作，但在我的模态中不起作用。

我该如何解决这个问题？

Answer 1

尝试使用[ngClass]根据条件应用cssclass-

--组件代码--

social: string;

onClickSocial(value) {
    this.social = value;
}

--HTML代码--

<a (click)="onClickSocial('instagram')" [ngClass]="{'active': social == 'instagram'}"></a>

--CSS代码--

.active {
  // style code
}

在模式中单击图标时如何更改元素的样式？

how change style of element when click on icon in modal?

modal-dialog

angular

mdbootstrap