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 中包含该值。