Hi, I want to render a list of string to tab component, but I found if I use ngFor, will cause error: TypeError: Cannot read property 'setAttribute' of undefined
, or “Invalid structure!”, “TypeError: Cannot read property ‘getAttribute’ of undefined”.
The code that will not cause error:
<div *ngIf='tabNameList.length > 0'>
<jqxTabs [theme]="'material'" #jqxTabs [height]="560" [initTabContent]="initWidgets">
<ul>
<li style="margin-left: 30px;">
<div style="height: 20px; margin-top: 5px;">
<div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
US Indexes
</div>
</div>
</li>
<li>
<div style="height: 20px; margin-top: 5px;">
<div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
NASDAQ compared to S&P 500
</div>
</div>
</li>
</ul>
<div>
one
</div>
<div>
two
</div>
</jqxTabs>
</div>
The code that cause error:
<div *ngIf='tabNameList.length > 0'>
<jqxTabs [theme]="'material'" #jqxTabs [height]="560" [initTabContent]="initWidgets">
<ul>
<li style="margin-left: 30px;" *ngFor='let i of tabNameList'>
<div style="height: 20px; margin-top: 5px;">
<div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
{{i}}
</div>
</div>
</li>
</ul>
<div *ngFor='let i of tabNameList'>
{{i}}
</div>
</jqxTabs>
</div>
Both of these two samples’ TS code are same.