[英]Data is loading after binding in template angular 5
After some manipulation on data, I am getting response in console like this: 在对数据进行一些操作之后,我在控制台中得到了这样的响应:
[{"date":"02-01-2018 - 31-12-2018"},{"date":"01-07-2018 - 31-12-2018"}]
But when I am trying to display this value in drop down, nothing is showed, its seems data binding happens before data loading. 但是,当我尝试在下拉列表中显示此值时,什么也没显示,它的数据绑定似乎发生在数据加载之前。 kindly help 友善的帮助
Here is my code 这是我的代码
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 my html 这是我的html
<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>
Kindly help 请帮助
The problem in your code is the <ng-template>
directive ng-template
s are like function they are not executed unless called in other words they are not displayed unless you call *ngIf="true" to them or use them for a template to other container using expression. 您代码中的问题是<ng-template>
指令ng-template
就像函数一样,它们不会执行,除非调用,否则它们不会显示,除非您对它们调用* ngIf =“ true”或将它们用作模板使用表达式转移到其他容器。
Remove the ng-template around mat-option
删除mat-option
周围的ng-template
<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>
<mat-option *ngFor="let t of nrvaldata; let i = index" [value]="t.date">{{t.date}}</mat-option>
</mat-select>
</mat-form-field>
</div>
*ngFor
expects an array, but because you're calling JSON.stringify
you're actually passing it a string. *ngFor
需要一个数组,但是由于您正在调用JSON.stringify
,因此实际上是在向它传递一个字符串。 If you check in the browsers console you will probably see an error about this. 如果您在浏览器控制台中签入,则可能会看到关于此的错误。
Just replace 只需更换
this.nrvaldata=JSON.stringify(rvaldata);
with 同
this.nrvaldata=rvaldata;
Also, remove the ng-template
tags and you should find it will work. 另外,删除ng-template
标记,您应该会发现它会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.