Question

我正在使用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模板内不起作用。

什么是最好的解决方案？

Answer 1

尝试

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

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

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

1 个答案: