My array consists of objects with dates spanning approximately 2 years, prices (which are added dynamically post API calls), and changeable validations within the Angular app:
calendarArrayDates = [
{"date": "2018-10-23", "price":"2313", "date_is_valid": true},
{"date": "2018-10-24", "price":"2313", "date_is_valid": true},
...
{"date": "2018-11-01", "price":"2313", "date_is_valid": false},
...
{"date": "2019-02-01", "price":"2313", "date_is_valid": true}
]
To dynamically display these dates in a calendar view, I've created this div in my component.html:
<div [innerHTML]="renderHTMLCalendar()"></div>
This function is then called:
renderHTMLCalendar(){
console.log("RENDER Calendar");
let container = "";
for (var calendarDate of this.calendarArrayDates) {
var date = calendarDate['date'];
var mDate = moment(date)
if (date === mDate.startOf('month').format(CALENDAR_DEFAULT_FORMAT)) {
container = "<div class='month'>"
}
container += `<div>
<div class='day'>${calendarDate['date']}
<div *ngIf="${calendarDate['price']}" class='price'>${calendarDate['price']}</div>
</div>`;
if (mDate === mDate.endOf('month')) {
container += "</div>"
}
}
return container;
}
The error occurs when using *ngIf in the function:
due to price being undefined. How can this be resolved?<div *ngIf="${calendarDate['price']}" class='fare'>${calendarDate['price']}</div>Multiple instances of console.log("RENDER Calendar") indicate that the function is called multiple times upon clicking the respective div. Is there an underlying issue causing this behavior?
Considering dynamic addition of prices at a later stage, is there a more efficient solution for rendering almost ~600 dates while accommodating changes in ngIf price and date_is_valid?