Angular2 * ng Si verifica la longitud de la matriz del objeto en la plantilla


89

Referido a https://angular.io/docs/ts/latest/guide/displaying-data.html y apilar Cómo verificar el objeto vacío en la plantilla angular 2 usando * ng Si aún se obtiene un error de sintaxis, el contexto personal no está definido. Si elimino la condición * ngIf, obtengo valores en teamMembers si introduzco algún valor en ella para poder acceder a los valores en teamMembers.

mi teamMemberobjeto es que [ ] arrayestoy tratando de verificar que la matriz de condiciones esté vacía por tamaño.

Intentos :

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

y

<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>

Componente :

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

Cualquier ayuda sería genial.


"arrojando error de sintaxis" ¿cuál es el mensaje de error exacto?
Günter Zöchbauer

EXCEPCIÓN ORIGINAL: TypeError: self.context.teamMembers no es una función para * ngIf = "teamMembers.length> 0" Lo intentaré con la respuesta a continuación 1 min pls
Karthigeyan Vellasamy

Respuestas:


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

Esto comprueba primero si teamMemberstiene un valor y si teamMembersno tiene un valor, que no intenta el acceso lengthde undefinedporque la primera parte de la condición ya no.


3
Aquí está el enlace correcto a safe navigation operator: angular.io/guide/template-syntax#safe-navigation-operator
Michael Czechowski

Esto puede arrojar que el Operador '>' no se pueda aplicar a los tipos 'booleano' y 'número'. mientras se optimiza la compilación con --aot o prod
krish

18

Puede usar *ngIf="teamMembers != 0"para verificar si hay datos presentes


2

Tal vez una ligera exageración, pero la biblioteca creada ngx-if-empty-or-has-items comprueba si un objeto, conjunto, mapa o matriz no está vacío. Quizás ayude a alguien. Tiene la misma funcionalidad que ngIf (entonces, se admite la sintaxis else y '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>

1

Puedes usar

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

Sin event.attendees?.length > 0ni siquieraevent.attendees?length != 0

Porque ?.lengthya devuelve un valor booleano .

Si en la matriz será algo, lo mostrará de lo contrario no.


0

Este artículo me ayudó mucho a descubrir por qué tampoco funcionaba para mí. Me dio una lección pensar en la carga de la página web y en cómo angular 2 interactúa como una línea de tiempo y no solo como el momento en el que estoy pensando. No vi a nadie más mencionar este punto, así que lo haré ...

La razón por la que se necesita * ngIf es porque intentará comprobar la longitud de esa variable antes de que suceda el resto de las cosas de OnInit, y arrojará el error "length undefined". ¿Entonces por eso agregas el? porque todavía no existirá, pero pronto lo hará.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.