Question

我正在使用Angular4应用程序，在此我想根据条件处理范围（启用/禁用）。当购物车中没有商品我想要禁用跨度时想要显示＃39;购物车中至少有一种产品。

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

如何从HTML端或组件端（打字稿）中点燃它。

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

    }
}

Answer 1

在你的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>

Answer 2

您可以添加一个If语句* ng如果要隐藏它。如果你不想显示它。（我假设你的意思是而不是禁用）。如果计数为0，则不显示。

Span不作为控件，因此无法禁用。请参阅以下列表，了解可禁用的元素： https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

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

如何根据Angular4中的条件禁用span

2 个答案: