自定义Angular组件在mat-tab中仅显示单条循环数据问题求助

核心问题分析 #

你错误地将*ngFor指令应用在了<body>标签上，而<body>是HTML页面的顶级根元素，在Angular组件模板中重复渲染<body>会违反HTML规范，浏览器会自动修正混乱的DOM结构，最终导致布局异常，出现仅显示单条数据、滚动后才加载后续内容的问题。

修复方案 #

修改hukamnama-sahib.component.html，将循环指令从<body>移到一个普通容器标签（比如<div>）上，确保组件模板有合法的单一根结构：

<div *ngFor="let dataitem of HukamnamaSahibList" class="hukamnama-entry">
  <h4>
    <span class="gurmukhi">{{dataitem.line.gurmukhi.unicode}}</span><br>
    <span class="punjabitranslation">{{dataitem.line.translation.punjabi.default.unicode}}</span><br>
    <span class="englishtranslation">{{dataitem.line.translation.english.default}}</span>
  </h4>
</div>

额外优化建议 #

可以给每个条目添加基础样式，避免内容重叠或间距异常：

.hukamnama-entry {
  margin-bottom: 1.5rem;
  padding: 0.5rem;
}

内容的提问来源于stack exchange，提问作者Amrinder Singh