To jest mój kod pliku Angular HTML :

<mat-card  *ngFor="let getCartDetail of getCartDetails"  style="margin-bottom: 1em; " >
            <div class="card-container"> 
                <mat-card-title ><h3>{{getCartDetail.title1}}</h3> </mat-card-title>
            </div>
    </mat-card>

Gdy tablica „getCartDetails” jest pusta, pojawia się błąd „Nie można odczytać właściwości „title1” niezdefiniowanej”. Jak ustawić pusty ciąg na getCartDetail.title1 lub czy mogę go zniknąć, gdy tablica jest pusta.

1
Nirodha Wickramarathna 18 czerwiec 2021, 16:26

4 odpowiedzi

Najlepsza odpowiedź

Istnieje wiele metod

Opcja 1: Korzystanie z *ngIf

Możesz sprawdzić, czy tablica jest zdefiniowana przed jej użyciem. Ponieważ pojedynczy element nie może mieć dwóch dyrektyw strukturalnych, owinąłbym go w <ng-container>.

<ng-container *ngIf="!!getCartDetails && getCartDetails.length">
  <mat-card  *ngFor="let getCartDetail of getCartDetails"  style="margin-bottom: 1em; " >
    <div class="card-container"> 
      <mat-card-title><h3>{{getCartDetail.title1}}</h3> </mat-card-title>
    </div>
  </mat-card>
</ng-container>
  • !!getCartDetails sprawdza, czy zmienna getCartDetails jest zdefiniowana. Więcej informacji na temat podwójnego uderzenia !! znajdziesz tutaj.
  • getCartDetails.length sprawdza, czy tablica jest pusta

Tutaj <mat-card> nie będzie renderowany, gdy warunek nie powiedzie się.

Opcja 2: operator bezpiecznej nawigacji ?.

Możesz użyć operatora bezpiecznej nawigacji ?., aby sprawdzić, czy zmienna jest zdefiniowana przed uzyskaniem dostępu do jej właściwości.

<mat-card  *ngFor="let getCartDetail of getCartDetails"  style="margin-bottom: 1em; " >
  <div class="card-container"> 
    <mat-card-title><h3>{{getCartDetail?.title1}}</h3> </mat-card-title>
  </div>
</mat-card>

Tutaj <mat-card> zostałby wyrenderowany z pustym <mat-card-title>, gdy title1 jest niedostępny.

Opcja 3: Korzystanie z ||

Instrukcje wewnątrz interpolacji szablonu Angular {{ }} są poprawnymi wyrażeniami maszynopisu, więc możesz użyć ||, aby użyć alternatywnej wartości, gdy wyrażenie się nie powiedzie.

<mat-card  *ngFor="let getCartDetail of getCartDetails"  style="margin-bottom: 1em; " >
  <div class="card-container"> 
    <mat-card-title><h3>{{ getCartDetail.title1 || '' }}</h3> </mat-card-title>
  </div>
</mat-card>

Tutaj <mat-card> zostałby wyrenderowany z pustym <mat-card-title>, gdy title1 jest niedostępny.

5
Michael D 18 czerwiec 2021, 13:50

Możesz użyć sprawdzania długości w tablicy:

<ng-container *ngIf="array && array.length > 0">
  <mat-card *ngFor="let item of array">
  </mat-card>
</ng-container>

Lub możesz użyć Elvisa/operatora bezpiecznej nawigacji

 <h3>{{getCartDetail?.title1}}</h3>
1
YogendraR 18 czerwiec 2021, 13:35

1. Możesz użyć sprawdzania wartości null w kodzie za pomocą znaku '?'

<mat-card  *ngFor="let getCartDetail of getCartDetails"  style="margin-bottom: 1em; " >
        <div class="card-container"> 
            <mat-card-title ><h3>{{getCartDetail?.title1}}</h3> </mat-card-title>
        </div>
</mat-card>
1
Lucas Fonseca 18 czerwiec 2021, 13:36

Użyj ng-template do tej walidacji, na przykład:

<ng-template [ngIf]="getCartDetails.length > 0">
    <mat-card *ngFor="let getCartDetail of getCartDetails" style="margin-bottom: 1em; ">
        <div class="card-container">
            <mat-card-title>
                <h3>{{getCartDetail.title1}}</h3>
            </mat-card-title>
        </div>
    </mat-card>
</ng-template>
1
Joshue 18 czerwiec 2021, 13:36