html - 如何基于Angular4中的条件禁用跨度

我正在Angular4应用程序中工作，我想根据条件处理跨度(启用/禁用)。

当购物车中没有物品时，我要禁用跨度。

但是，当购物车中至少有1件商品时。跨度将被启用。

 <span class=" notification-counter badge badge-danger" data-toggle="modal" data-target="#exampleModal" style="cursor: pointer;">{{nCount}}</span>

从HTML或 typescript 方面，我该如何处理。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { HostListener } from '@angular/core';
import {CartdataService} from './cartdata.service';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit{
    nCount : string;
    constructor(private CartdataService:CartdataService,private http: HttpClient) { }

    ngOnInit() {
        this.CartdataService.cast.subscribe(Count=> this.nCount = Count);

    }
}

最佳答案

在您的CSS中尝试以下操作:

.disabled {
  pointer-events: none; # use this if you want to block all pointer events on element
  display: none; # use this if you want to hide element
}
.notification-counter {
  cursor: pointer;
}

和你的跨度:

<span class='notification-counter badge badge-danger' [class.disabled]="nCount == 0" data-toggle="modal" data-target="#exampleModal">{{nCount}}</span>

关于html - 如何基于Angular4中的条件禁用跨度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49398050/