Having an issue with using a ngFor in a nested element along with the @Input() decorator:
<app-sever-element *ngFor="let server_element of serverElements"
[element]="serverElements">
</app-sever-element>
Within the component of app-sever-element, here's what I have:
<div class="panel panel-default">
<div class="panel-heading">{{ element.name }}</div>
<p>
{{ element.content }}
</p>
</div>
This is the array being accessed with a custom property declared in the AppComponent:
serverElements=[
{ type: 'server', name: 'Test', content: 'This is only a test' }
];
However, facing an issue where empty element appears and when trying to view the element with the filter json {{element | json}}, it shows the whole array in each iteration.
The problem lies in why the entire array is passed as an element in every loop. Even after testing with multiple objects in the array, it always comes out as the whole array.