I have a small angular app in which I want to use DataView and p-fieldset to display some informations. This is the view:
<p-dataView #dv
[value]="defaultRoles"
[paginator]="true"
[rows]="5"
>
<p-header>Default roles</p-header>
<p-footer></p-footer>
<ng-template pTemplate="listItem" *ngFor="let role of defaultRoles" class="float">
<p-fieldset legend={{role.designation}} [toggleable]="true" class="p-fieldset">
<div class="p-fieldset">
{{role.description}}
</div>
</p-fieldset>
</ng-template>
</p-dataView>
I imported correctly the DataView and p-fieldset in appModule and in the authModule where the component is called:
import { FieldsetModule } from "primeng/fieldset";
import { DataViewModule } from "primeng/dataview";
But the p-fieldset style is not applied as demonstrated here. Also the iteration *ngFor="let role of defaultRoles" only displays the last element in the array 5 times.
As you can see on image only the role sec-med' data is displayed 5 times corresponding to the [rows]="5" that I set in the <p-dataView> tag. But the defaultRoles data is defined in component as below:
defaultRoles = [
{ designation: "Super-Admin", description: "An Administrator provides office support to either an individual or team and is vital for the smooth-running of a business. "},
{ designation: "Admin", description: "Their duties may include fielding telephone calls, receiving and directing visitors"},
{ designation: "Med", description: "Administrators are usually required to use Microsoft Office and should demonstrate proficiency with Microsoft Word,"},
{ designation: "Sec", description: "Knowledge with Xero or MYOB packages can be an advantage."},
{ designation: "Sec-med", description: "The Administrator provides office support to either an individual or team and is vital for the smooth-running of a business. Le Rôle Secretaire Medecin est celui attribué à rapproché au medecin chargé superviseur des secretaires"}
];
As you can see the p-fieldset is broken and only the role sec-med which is the last in the array is the only one displayed 5 times. Can you please tell me what I'm doing wrong for the p-fieldset not taking proper PrimeNG style, and why the defaultRoles array data is not completely display. I will appreciate your help to get into the right path. Thanks in advance.