Angular2 * ngIf sprawdza długość tablicy obiektów w szablonie

89

Odnosi się do https://angular.io/docs/ts/latest/guide/displaying-data.html i stosu Jak sprawdzić pusty obiekt w szablonie Angular 2 za pomocą * ngJeśli nadal pojawia się błąd składni niezdefiniowany. Jeśli usunę warunek * ngIf, otrzymam wartości w teamMembers, jeśli wrzucę do niego jakąś wartość, aby uzyskać dostęp do wartości w teamMembers.

moim teamMemberobiektem jest [ ] arraypróba sprawdzenia, czy tablica warunków jest pusta według rozmiaru.

Próby: 

<div class="row" *ngIf="(teamMembers | json) != '{}'">

i

<div class="row" *ngIf="teamMembers.length > 0"> //Check length great than
                                                 throwing syntax error
            <div class="col-md-12">
                <h4>Team Members</h4>
                <ul class="avatar" *ngFor="let member of teamMembers">
                    <li><a href=""><gravatar-image [size]="80" [email]="member.email"></gravatar-image></a></li>
                </ul>
            </div>
        </div>

Składnik :

@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];

Każda pomoc byłaby świetna.

angular angular2-template Karthigeyan Vellasamy
źródło
Jaki jest dokładny komunikat o błędzie?
Günter Zöchbauer
WYJĄTEK ORYGINALNY: TypeError: self.context.teamMembers nie jest funkcją dla * ngIf = "teamMembers.length> 0" spróbuję z poniższą odpowiedzią 1 min.
Karthigeyan Vellasamy

Odpowiedzi:

286 
<div class="row" *ngIf="teamMembers?.length > 0">

Sprawdza najpierw, czy teamMembersma wartość, a jeśli teamMembersnie ma wartości, nie próbuje uzyskać dostępu lengthdo, undefinedponieważ pierwsza część warunku już zawodzi.

Günter Zöchbauer
źródło
3
Oto poprawny link do safe navigation operator: angular.io/guide/template-syntax#safe-navigation-operator
Michael Czechowski
Może to spowodować, że Operator „>” nie może być zastosowany do typów „boolean” i „number”. przy jednoczesnej optymalizacji budować z --aot lub prod
Krish
18

Możesz użyć, *ngIf="teamMembers != 0"aby sprawdzić, czy dane są obecne

AishApp
źródło
2

Może trochę przesada, ale utworzona biblioteka ngx-if-empty-or-has-items sprawdza, czy obiekt, zbiór, mapa lub tablica nie są puste. Może to komuś pomoże. Ma taką samą funkcjonalność jak ngIf (wtedy, else i obsługiwana jest składnia „as”).

arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>
alexKhymenko
źródło
1

Możesz użyć

<div class="col-sm-12" *ngIf="event.attendees?.length">

Bez event.attendees?.length > 0lub nawetevent.attendees?length != 0

Ponieważ ?.lengthjuż zwracamy wartość logiczną .

Jeśli w tablicy będzie coś, to wyświetli to, w przeciwnym razie nie.

Druta Ruslan
źródło
0

Ten artykuł pomógł mi dużo zrozumieć, dlaczego nie działa dla mnie. Daje mi to lekcję, jak myśleć o ładowaniu strony internetowej i o tym, jak angular 2 oddziałuje jako oś czasu, a nie tylko do momentu, o którym myślę. Nie widziałem, żeby ktokolwiek wspominał o tym punkcie, więc ...

Powód, dla którego * ngIf jest potrzebny, ponieważ spróbuje sprawdzić długość tej zmiennej, zanim wydarzy się reszta rzeczy OnInit, i wyrzuci błąd „length undefined”. Dlatego właśnie dodajesz? ponieważ jeszcze nie istnieje, ale wkrótce będzie.

Mitchell Matula
źródło