如何从JSON中提取LIB、ZON两个字段并在Angular页面正常展示

问题根因 #

你的代码使用*ngFor遍历了annexeDetails?.TAB下的全部数组元素，而JSON的TAB数组中存在大量LIB和ZON字段为空的条目，这些空条目也会被渲染到页面上，最终呈现出大量空白行、只有目标值可见的效果。同时你需要的ZON值自带前置空格，且用逗号作为小数分隔符，也需要额外处理。

解决方案 #

你可以选择以下任意一种方式修复：

方案1：直接在模板中过滤（适合快速修改） #

给循环节点加非空判断，同时格式化ZON字段的显示内容：
如果你的Angular版本支持同一节点同时使用*ngFor和*ngIf，可以直接修改为：

<div class="row">
   <div class="col-12 col-md-6" *ngFor="let l of annexeDetails?.TAB; let i=index" *ngIf="l.LIB.trim() || l.ZON.trim()">
      <div class="col-12 col-md-6">
         {{l.LIB.trim()}} 
      </div>
      <div class="col-12 col-md-6">
         {{l.ZON.trim().replace(',', '.')}}
      </div>
   </div>
</div>

如果版本不支持两个结构型指令在同一节点，套一层ng-container即可：

<div class="row">
   <ng-container *ngFor="let l of annexeDetails?.TAB; let i=index">
      <div class="col-12 col-md-6" *ngIf="l.LIB.trim() || l.ZON.trim()">
         <div class="col-12 col-md-6">
            {{l.LIB.trim()}} 
         </div>
         <div class="col-12 col-md-6">
            {{l.ZON.trim().replace(',', '.')}}
         </div>
      </div>
   </ng-container>
</div>

方案2：在TS中预处理数据（更推荐，性能更好） #

在拿到接口返回值之后先过滤空条目、格式化字段，原有模板代码不需要修改：

prepareDataForTemplate(res) {
    if (res.RETURNCODE == 'OKK00') {
        this.annexeDetails = res.JANX;
        // 过滤空条目+格式化ZON字段
        this.annexeDetails.TAB = this.annexeDetails.TAB.filter(item => {
            return item.LIB.trim() !== '' || item.ZON.trim() !== ''
        }).map(item => {
            item.ZON = item.ZON.trim().replace(',', '.');
            return item;
        });
        console.log("Test" + JSON.stringify(this.annexeDetails));
    } else {
        if (res.RETURNLIST.length > 0) {
            this.errors = res.RETURNLIST;
        }
    }
}

特殊场景：确定只需要固定的某一条数据 #

如果你确认目标值永远在TAB数组的固定下标位置，不需要遍历，直接指定下标取值即可，你可以从控制台输出的TAB数组里找到目标值对应的下标填入：

<div class="row">
   <div class="col-12 col-md-6">
      <div class="col-12 col-md-6">
         {{annexeDetails?.TAB[目标下标].LIB.trim()}} 
      </div>
      <div class="col-12 col-md-6">
         {{annexeDetails?.TAB[目标下标].ZON.trim().replace(',', '.')}}
      </div>
   </div>
</div>

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