为什么我无法遍历我的数组对象

Question

我正在尝试显示object of array 中的所有数据。

但我无法显示其中任何一个，为什么？

这是我尝试过的

在这里演示：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>

或

没有*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>