如果数组为空，则不渲染 - Angular *ngFor答案

【问题标题】：Don't render if array is empty - Angular *ngFor如果数组为空，则不渲染 - Angular *ngFor
【发布时间】：2019-11-20 11:13:56
【问题描述】：

我正在使用 JSON 数据构建前端。我必须通过很多数组来检查内部是否存在值。如果该值不存在，那么我的完整 HTML 不应该呈现。

<ng-container *ngIf="document161['_source']['161_Events']">
                      <div class="row">
                        <span class="col-md-auto meta-object text-muted"><span>Begräbnistag:</span></span>
                        <span class="col">
                          <span *ngFor="let event of document161['_source']['161_Events']">
                            <span *ngFor="let sub of event.peventsub">

                              <ng-container *ngIf="sub.content === 'Begräbnis'">
                                <span *ngFor="let geburtsort of event.pstdatetypesub">
                                  {{geburtsort.content}}
                                </span>
                              </ng-container>

                            </span>

                          </span>
                        </span>
                      </div>
                      <mat-divider class="my-2"></mat-divider>
          </ng-container>

我已经尝试过的是：

<ng-template #thenBlock>
<ng-container *ngIf="document161['_source']['161_Events']">
                          <div class="row">
                            <span class="col-md-auto meta-object text-muted"><span>Begräbnistag:</span></span>
                            <span class="col">
                              <span *ngFor="let event of document161['_source']['161_Events']">
                                <span *ngFor="let sub of event.peventsub">

                                  <ng-container *ngIf="sub.content === 'Begräbnis'">
                                    <span *ngFor="let geburtsort of event.pstdatetypesub">
<ng-container ngIf="*ngIf="geburtsort.content; then thenBlock else elseBlock">
                                      {{geburtsort.content}}
</ng-container>
                                    </span>
                                  </ng-container>

                                </span>

                              </span>
                            </span>
                          </div>
                          <mat-divider class="my-2"></mat-divider>
              </ng-container>
</ng-template>
<ng-template #elseBlock>

</ng-template>

但正如您所见，存在多个问题。如果值不存在，可能 Ii 无法达到 ngIf 条件。然后 else 逻辑在 ng-container 模板中不起作用。

最好的解决方案应该是什么？

【问题讨论】：

标签： json angular

【解决方案1】：

试试这个

*ngIf="document161?._source?.161_Events?.length > 0"

如果数组有值，它将显示其他元素将隐藏。

【讨论】：

重要的是 geburtsort.content 值。因此 document161['_source']['161_Events'] 可能存在。但是不会有 geburtsort.content 值。