Upon manipulating the data, I noticed that the response in the console looks like this:
[{"date":"02-01-2018 - 31-12-2018"},{"date":"01-07-2018 - 31-12-2018"}]
However, when attempting to display this value in a drop down, nothing is shown. It appears that data binding is taking place before the data loading. Can someone please assist?
Below is the code snippet:
Change(opened: boolean) {
if (opened) { }
var rvaldata:any= [];
calculateRange(this.choosenSub);
if(rvaldata!='')
{
this.nrvaldata=JSON.stringify(rvaldata);
console.log(this.nrvaldata);
}
function calculateRange(_data){
var r = "";
for(var i=0;i<_data.length;i++){
var isArray = Array.isArray(_data[i]);
if(isArray){
r+=calculateRange(_data[i]);
}else{
var x = _data[i].date;
r = rvaldata.push({'date':x})
}
}
return JSON.stringify(r);
}
}
Here is the HTML code snippet:
<div class="d-inline-block">
<span class="plabel">Date<span class="star">*</span></span>
<mat-form-field>
<mat-select placeholder="Validity" class="project-tab" [formControl]="toppings" multiple required>
<ng-template >
<mat-option *ngFor="let t of nrvaldata; let i = index" [value]="t.date">{{t.date}}</mat-option>
</ng-template>
</mat-select>
</mat-form-field>
</div>
Your help will be greatly appreciated.