Question

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

<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流填充了来自服务器的值到名为＆＃39; InventoryList＆＃39;的变量。在我的自定义ng-template（#myCustomDayTemplate）中，我已经过了一天＆＃39;基于app-calendar中的处理将变量放入此模板中。在我的自定义模板中，我调用getValueByDay查看给定日期的InventoryList并显示库存计数。这一切都有效，但如果库存值为0，我需要能够更改浮出库存值的样式。

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

感谢您的帮助。

Answer 1

您可以调用该方法一次并更新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;
}

Angular 4如何从ng-template中的方法调用填充变量

1 个答案: