javascript - CSS 无法按 Angular 插值工作

Question

我有一个用例，我想在我的网络应用程序中向用户显示通知。显示的通知数量将取决于用户收到的查询数量。因此，我尝试使用插值来动态显示某个用户有多少通知。我的问题是，我的 CSS 样式仅在提供的通知数量是静态的情况下才有效。

这是使用静态数字时的示例(这是我想要的结果):image of how i want my notifications to look like

这是通过以下代码实现的:

 <li class="nav-item dropdown" dropdown>

  <span class="notification has-badge" innerHTML="4" 
   *ngIf="newNotificationsAvailable" >  </span>

       <a dropdownToggle mdbWavesEffect type="button" class="nav-link 
        dropdown-toggle waves-light fa fa-user" *ngIf="isLoggedIn" 
        mdbWavesEffect>

            Profile<span class="caret"></span></a>

还有 CSS:

.notification[innerHTML]:after {
    position:absolute;
    right:86%;
    top:0%;
    content: attr(innerHTML);
    font-size:60%;
    padding:.6em;
    border-radius:999px;
    line-height:.75em;
    color: white;
    background:rgba(255,0,0,.85);
    text-align:center;
    min-width:2em;
    font-weight:bold;
}

当我尝试添加插值以使通知数量更加动态地显示时，我得到以下结果:Result when adding interpolation

唯一的区别在于我的 html:

 <li class="nav-item dropdown" dropdown>

  <span class="notification has-badge" innerHTML="{{testvar}}" 
   *ngIf="newNotificationsAvailable" >  </span>

       <a dropdownToggle mdbWavesEffect type="button" class="nav-link 
        dropdown-toggle waves-light fa fa-user" *ngIf="isLoggedIn" 
        mdbWavesEffect>

            Profile<span class="caret"></span></a>

唯一的区别是我的innerHTML = {{testvar}}而不是4。

我对应的 .ts 文件只是将 testvar 设置为 5:

  export class AppComponent implements OnInit {

     public testvar = 5;


     //...plus a bunch of irrelevant code.
   }

任何人都可以帮助我理解为什么我的 css 对非静态值的响应不同？

Answer 1

您的第二个示例有效地导致 <span class="notification has-badge" ></span> .

innerHTML="{{testvar}}"导致 Angular 绑定(bind) testvar 的值到属性(property)innerHtml 。因此，它有效地从 HTML 中删除该属性，因为该属性没有相应的属性。因此，当浏览器尝试渲染content: attr(innerHTML);时根本不存在这样的属性。

而不是 innerHTML您可以使用title属性，这样就可以了。或者您将该值包含在 HTML 中。