如何使用 ngIf* 来验证变量是否为空？角度 8答案

【问题标题】：how to use ngIf* to validate if a variable is null? angular 8如何使用 ngIf* 来验证变量是否为空？角度 8
【发布时间】：2021-03-10 00:28:56
【问题描述】：

我正在使用此代码来使用服务数据并将其信息保存在数组中。

activities: [];

this.activitiesService.getUserActivities().subscribe((data: any) => {
      this.activities = data;
    });

问题是当我使用 *ngIf 显示或隐藏 ng-container 如果活动 [0] 为空时，出现此错误：ERROR TypeError: Cannot read property '0' of undefined

我给你看我的代码：

           <ng-container *ngIf="activities[0]">
              <div class="col-6 col-sm-6 col-md-3 actividad">
                <div class="testmonial_author text-center activity-active">
                  <i class="fas {{ activities[0].category }}"></i>
                  <span>{{ activities[0].description }}</span>
                </div>
              </div>
            </ng-container>
            <ng-container *ngIf="!activities[0]">
              <div class="col-6 col-sm-6 col-md-3 actividad">
                <div class="testmonial_author text-center" (click)="openModalActivity()">
                  <i class="fas fa-cloud-upload-alt"></i>
                  <span>Crea una actividad</span>
                </div>
              </div>
            </ng-container>

我尝试了这段代码，但没有工作。

           <ng-container *ngIf="activities[0]; else activity">
              <div class="col-6 col-sm-6 col-md-3 actividad">
                <div class="testmonial_author text-center activity-active">
                  <i class="fas {{ activities[0].category }}"></i>
                  <span>{{ activities[0].description }}</span>
                </div>
              </div>
            </ng-container>
            <ng-template #activity>
              <div class="col-6 col-sm-6 col-md-3 actividad">
                <div class="testmonial_author text-center" (click)="openModalActivity()">
                  <i class="fas fa-cloud-upload-alt"></i>
                  <span>Crea una actividad</span>
                </div>
              </div>
            </ng-template>

【问题讨论】：

标签： angular angular8

【解决方案1】：

检查activities 是否未定义。如果activities 不是未定义的，请检查索引[0]。

<ng-container *ngIf="activities && activities[0]; else activity">

【讨论】：