Angular 4, как заполнить переменную из вызова метода внутри ng-template

Я создаю компонент календаря, который создает календарь (представление месяца) для заданной даты. Я создал настраиваемый шаблон 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 заполняется значениями с сервера в переменную с именем «InventoryList». В моем пользовательском шаблоне ng (#myCustomDayTemplate) я передаю в этот шаблон переменную «день» на основе обработки в календаре приложения. Внутри своего пользовательского шаблона я вызываю метод getValueByDay, который просматривает InventoryList за данный день и выдает подсчет запасов. Все это работает, но мне нужно иметь возможность изменить стиль значения инвентаря, отображаемого в пользовательском интерфейсе, если значение инвентаря равно 0.

Я могу добиться этого, дважды вызвав getValueByDay (один раз, чтобы отобразить значение в пользовательском интерфейсе, и один раз, чтобы определить ngClass «нет инвентаря»). Можно ли один раз вызвать getValueByDay и поместить ответ в переменную, а затем использовать эту переменную в пользовательском интерфейсе, а также определить ngClass «без инвентаризации»?

Спасибо за вашу помощь.


angular ng-template
person Tom Schreck    schedule 12.12.2017    source источник
comment
Вы можете добавить код для метода getValueByDay в свой файл ts   -  person Aravind    schedule 13.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете вызвать метод один раз и обновить переменную в компоненте для 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;
}
person Aravind    schedule 12.12.2017
comment
myCustomDayTemplate и getValueByDay вызываются для каждого дня в календаре. Разве this.isZeroInventory не будет перезаписан и не будет привязан к данному дню? - person Tom Schreck; 13.12.2017
comment
какие свойства присутствуют внутри InventoryList - person Aravind; 13.12.2017
comment
Инвентарный список содержит только дату и количество. Я полагаю, что могу увеличить это с помощью isZeroInventory. - person Tom Schreck; 13.12.2017
comment
что вы подразумеваете под этим augment. Также в чем логика метода getValueByDay() - person Aravind; 13.12.2017
comment
логика в getValueByDay() просто фильтрует InventoryList по дате и отображает количество за этот день. Под расширением я подразумеваю добавление isZeroInventory в качестве свойства каждого элемента в InventoryList. - person Tom Schreck; 13.12.2017