0

我正在创建一个日历组件，它为给定日期构建日历（月视图）。我创建了一个自定义 ng-template 以传递给日历控件，因此我可以根据从服务调用返回的数据在日历中为每一天注入自定义内容。这是我的代码：

<section class="calendar-container" *ngIf="inventoryService.InventoryAvailableListStream | async; let InventoryList">
    <app-calendar [dayTemplate]="myCustomDayTemplate"></app-calendar>

    <ng-template #myCustomDayTemplate let-day="day">
        <span class="inventory-level" [ngClass]="{'no-inventory': (getValueByDay(InventoryList, day) === 0)}">
            {{getValueByDay(InventoryList, day)}}           
        </span>
    </ng-template>  
</section>

一旦我的inventoryService 流将来自服务器的值填充到名为“InventoryList”的变量中，我就有一个部分显示。在我的自定义 ng-template (#myCustomDayTemplate) 中，我根据 app-calendar 中的处理将“day”变量传递到此模板中。在我的自定义模板中，我调用 getValueByDay 来查看给定日期的 InventoryList 并显示库存计数。这一切正常，但如果库存值为 0，我需要能够更改显示在 UI 上的库存值的样式。

我可以通过调用 getValueByDay 两次来实现这一点（一次将值显示到 UI，一次确定 ngClass''no-inventory'）。是否可以调用一次 getValueByDay 并将答案放入变量中，然后在 UI 中使用该变量以及确定 ngClass''no-inventory'？

谢谢你的帮助。

4

1 回答 1

0

您可以调用该方法一次并更新组件中的变量，ngClass如下所示，

<ng-template #myCustomDayTemplate let-day="day">
    <span class="inventory-level" [ngClass]="{'no-inventory': isZeroInventory}">
        {{getValueByDay(InventoryList, day)}}           
    </span>
</ng-template>

声明一个变量，如

isZeroInventory : boolean = false;

该方法应包含逻辑并更新上述变量，如下所示，

getValueByDay(inventoryList,day){
 // logics 
   this.isZeroInventory = true/false;
}
于 2017-12-12T22:05:06.193 回答