如何使用 ngIf* 驗證變量是否為 null？ angular 8

Question

我正在使用此代碼來使用服務數據並將其信息保存在數組中。

activities: [];

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

問題是當我使用 *ngIf 顯示或隱藏 ng-container 如果活動 [0] 是 null 時，出現此錯誤：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>

Answer 1

檢查activities是否未定義。 如果activities未定義，請檢查索引 [0]。

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