web-dev-qa-db-fra.com

ERREUR TypeError: Impossible de lire la propriété 'longueur' de non définie

Il y a une erreur dans cette partie de mon code

<img src="../../../assets/gms-logo.png" alt="logo" routerLink="/overview" alt="website icon">

Mais lorsque j'ai vérifié le dossier des actifs, gms-logo.png est toujours présent et dans angular-cli.json, les actifs sont également présents. Le chemin est également correct. 

Récemment cependant, j'ai travaillé sur la fonction de recherche. Donc, mon hypothèse est, 

Le programme a-t-il commencé la recherche même si l'utilisateur n'est toujours pas concentré sur le type d'entrée? Comment puis-je réparer ça?

Ci-dessous mon HTML pour Search et la présentation de son segment de suggestion

<input type="text" placeholder="Search" (keyup)="onSearch($event.target.value)">        
<div class="suggestion"  *ngIf="results.length > 0">
     <div *ngFor="let result of results ">
          <a href="" target="_blank">
                {{ result.name }}
          </a>
     </div>
</div>

Ci-dessous ma composante

results: Object;



 onSearch(name) {
            this.search
            .searchEmployee(name)
            .subscribe(
                name => this.results = name,//alert(searchName),this.route.navigate(['/information/employees/']),
                error => alert(error),
                );
}
angulartypeerrorangular-cligoogle-developers-consolegoogle-developer-tools
3
Char

Vous devez initialiser votre variable results sous forme de tableau.

Dans votre composant, ajoutez:

results = [];

Une autre option consiste à modifier l'instruction *ngIf de votre suggestion pour vérifier si results est défini: 

<div class="suggestion"  *ngIf="results">
   <div *ngFor="let result of results ">
          <a href="" target="_blank">
                {{ result.name }}
       </a>
   </div>
</div>
8
Levi Fuller

L'opérateur de navigation sûre (?.) Et les chemins de propriétés nuls

L'opérateur de navigation Angular (?.) Est un moyen efficace et pratique de se prémunir contre les valeurs nulles et non définies dans les chemins de propriétés. Voilà, la protection contre une vue rend échec si le currentHero est null.

Ainsi, dans votre exemple, vous pouvez également utiliser L'opérateur de navigation sécurisée (?.):

<div class="suggestion"  *ngIf="results?.length > 0">
    <div *ngFor="let result of results ">
        <a href="" target="_blank">
            {{ result.name }}
        </a>
    </div>
</div>
1
Šime Tokić