Angular13中PrimeNG DataView与p-fieldset组件异常问题

1. DataView遍历重复渲染最后一个元素的问题 #

错误原因 #

PrimeNG DataView的模板用法存在错误：*ngFor 不应该写在标记了pTemplate="listItem"的ng-template标签上。
DataView组件本身会自动遍历绑定到[value]属性的数组，将当前遍历项通过模板上下文传递给listItem模板。手动在ng-template上添加ngFor会造成逻辑冲突：DataView按照[rows]="5"的配置渲染5次模板，而自定义的ngFor每次都会遍历完整数组，最终闭包引用停留到数组最后一个元素，就会出现5次渲染结果全是最后一项的现象。

修复方案 #

移除ng-template上的*ngFor指令，通过模板上下文获取当前遍历的role对象，修正后的DataView代码如下：

<p-dataView #dv
  [value]="defaultRoles"
  [paginator]="true"
  [rows]="5"
>
  <p-header>Default roles</p-header>
  <p-footer></p-footer>
  <!-- let-role 直接从DataView模板上下文获取当前遍历项，无需额外加*ngFor -->
  <ng-template pTemplate="listItem" let-role class="float">
    <p-fieldset [legend]="role.designation" [toggleable]="true" class="p-fieldset">
      <div>
        {{role.description}}
      </div>
    </p-fieldset>
  </ng-template>
</p-dataView>

补充说明：PrimeNG的DataView、Table这类数据展示组件，内部已经封装了数组遍历逻辑，不需要手动在模板上加*ngFor，只需要通过let-xxx语法从模板上下文拿到当前行数据即可。

2. p-fieldset样式未正常加载的问题 #

常见原因及排查方向 #

• 缺失PrimeNG全局依赖样式：PrimeNG组件样式依赖全局基础样式、主题样式和图标库，需要在项目的angular.json配置文件的styles数组中引入对应资源，示例配置：

"styles": [
  "node_modules/primeng/resources/themes/lara-light-blue/theme.css", // 可替换为任意官方主题
  "node_modules/primeng/resources/primeng.min.css", // PrimeNG全局基础样式
  "node_modules/primeicons/primeicons.css", // 图标资源，fieldset的切换图标依赖该文件
  "src/styles.css"
]

• 类名冲突：原代码中给fieldset内部的普通div也添加了class="p-fieldset"，这个类是PrimeNG预设给fieldset根元素的样式类，内部元素误用该类会造成边框、内边距样式错位，上述修复代码已经移除了这个多余类名。
• 样式封装冲突：如果组件自定义了ViewEncapsulation封装规则，可能导致PrimeNG样式无法穿透到组件内部，可以临时移除组件的encapsulation配置验证是否为该问题。

内容的提问来源于stack exchange，提问作者Himmels DJ