为特定日期添加背景颜色答案

【问题标题】：Add background color to a specific date为特定日期添加背景颜色
【发布时间】：2018-07-09 17:35:15
【问题描述】：

我有一个日历并使用 material-calendar ，我只想突出显示一个特定日期，例如 19-7-2018，这意味着它应该有一个背景颜色，例如红色

这是我到目前为止所做的事情

<div class="form-group form-element_date">
          <mat-calendar  [minDate]="minimumDate" [maxDate]="restrictedBookingDates" mat-date-filter="restrictedBookingDates"  [selected]="selectedDate" (selectedChange)="selectedDate = $event">
            <ng-template pTemplate="date" let-date>
              <span  class="dot" [ngStyle]="{backgroundColor: (date.day ==19) ? '#348db2' : 'inherit'}"   
              >{{date.day}}</span>
          </ng-template>
          </mat-calendar>
        </div>

不幸的是，这不起作用

我的代码有什么问题？

【问题讨论】：

认为您需要添加 [ngClass] 而不是 ngStyle。 angular.io/api/common/NgClass[ngClass]="{'your-class':date.day === 19}"
我认为错误是您检查 date.day。如果 date 是日期对象，请尝试使用 date.getDate()
你可以给它一个明确的答案，如果它有效，我可以接受你的答案

标签： angular html bootstrap-4 angular-material

【解决方案1】：

正如评论中所说，您可以使用 ngClass。在 HTML 中：

<div class="form-group form-element_date">
          <mat-calendar  [minDate]="minimumDate" [maxDate]="restrictedBookingDates" mat-date-filter="restrictedBookingDates"  [selected]="selectedDate" (selectedChange)="selectedDate = $event">
            <ng-template pTemplate="date" let-date>
              <span  class="dot" [ngClass]="{'your-class': date.day === 19}"   
              >{{date.day}}</span>
          </ng-template>
          </mat-calendar>
        </div>

在css中：

.your-class {
  background-color: #348db2;
}

【讨论】：

没有任何东西被添加到 dom 中，无论是类还是什么，我认为我的代码根本不起作用，这是在材料中突出显示特定日期的正确方法吗？还是有更好的方法？？ :( 我卡住了
19是字符串还是数字？
它是一个数字，以便更好地参考：请突出显示此日期 19-7-2018 stackblitz.com/angular/…
这不是我想要的，你有一个内联日历，日历的日期应该是 19-7-2018，颜色为红色，就这么简单，当你打开我提供的链接，你可以看到今天的日期被突出显示，我想要相同的日期，但另一个日期。

【解决方案2】：

试试这个，background-color 而不是 backgroundColor

<span  class="dot" [ngStyle]="{'background-color': (date.day ==19) ? '#348db2' : 'inherit'}">{{date.day}}</span>

【讨论】：

mhh 你复制了和我的问题一样的东西你改变了什么？
尝试使用background-color 而不是backgroundColor
你能把 (date.day ==19) 改成 true 看看代码是否正常工作。
没有添加到 dom 所以我认为代码不能正常工作，也许你知道其他方法来得到我想要的，我所拥有的根本不起作用
创建另一个类并使用<span class="dot" [ngClass]="{'someclass':date.day == 19}">{{date.day}}</span>