爲什麼我無法循環訪問數組對象

Question

我試圖顯示array的object中的所有數據。

但我無法顯示它們中的任何一個，爲什麼？

這裏就是我試圖

演示在這裏：https://stackblitz.com/edit/ionic-dsdjvp?file=pages%2Fhome%2Fhome.ts

home.html的

<div *ngIf="searchResults.length > 0"> 
    <ion-item *ngFor="let searchResult of searchResults.details">   
     <ion-avatar item-start> 
      <!--<img src="img/Rabbit-Cage.jpg"> --> 
     </ion-avatar> 
     <h2>searchResult.user_id</h2> 
     <h3>searchResult.email</h3> 
     <p>searchResult.token</p>   
     </ion-item>  
</div> 

home.ts

export class HomePage { 

    searchResults = [{ 
    "details": [{ 
     "user_id": "73", 
     "email": "ejazanwar777@gmail.com", 
     "token": "217808036f0215fee13aee8925574899" 
    }, { 
     "user_id": "94", 
     "email": "ejazanwar7dds77@gmail.com", 
     "token": "f4e9a701f9dae581ecbc2abf1470f88f" 
    }, { 
     "user_id": "98", 
     "email": "ejazanwar777dsggds@gmail.com", 
     "token": "3481a3c17a752ef136a4eadeaa0813f4" 
    }, { 
     "user_id": "99", 
     "email": "ejazanwar777@gmail.comsaasas", 
     "token": "6bd7941c8b501f798c8854047a395bdf" 
    }, { 
     "user_id": "100", 
     "email": "ejazanwar777jgfjgfjfg@gmail.com", 
     "token": "127934324e39ad681826322632f91259" 
    }, { 
     "user_id": "107", 
     "email": "ejazanwar77adsfdasf7@gmail.com", 
     "token": "1a6c860fc6d6a2875f4de371dee22b22" 
    }, { 
     "user_id": "108", 
     "email": "ejazanwar777@gmail.comdddd", 
     "token": "684aae9542ddc76f1f78c4360afe8846" 
    }, { 
     "user_id": "109", 
     "email": "jhddfhfdfdhdhfjhj@gmail.com", 
     "token": "069fe4f0ec2210c1e8eb9400486f1718" 
    }, { 
     "user_id": "110", 
     "email": "ejazanwar777@gmail.comssdssdd", 
     "token": "a10f3620d18466a0d5780749401052ad" 
    }] 
}]; 

    constructor(public navCtrl: NavController) { 

    } 

} 

這裏是我的演示https://stackblitz.com/edit/ionic-dsdjvp?file=pages%2Fhome%2Fhome.ts

請提前幫助我，謝謝！

Answer 1

你在這裏做錯了searchResults.length > 0。您需要使用這樣的searchResults?.details?.length > 0

這裏是工作stackblitz

<div *ngIf="searchResults?.details?.length > 0"> 
    <ion-item *ngFor="let searchResult of searchResults?.details">   
     <ion-avatar item-start> 
      <!--<img src="img/Rabbit-Cage.jpg"> --> 
     </ion-avatar> 
     <h2>searchResult.user_id</h2> 
     <h3>searchResult.email</h3> 
     <p>searchResult.token</p>   
     </ion-item>  
</div> 

OR

沒有*ngIf

<div> 
     <ion-item *ngFor="let searchResult of searchResults?.details">   
      <ion-avatar item-start> 
       <!--<img src="img/Rabbit-Cage.jpg"> --> 
      </ion-avatar> 
      <h2>searchResult.user_id</h2> 
      <h3>searchResult.email</h3> 
      <p>searchResult.token</p>   
      </ion-item>  
    </div>