ionic 5 - ngFor 不显示数据答案

【问题标题】：ionic 5 - ngFor not showing dataionic 5 - ngFor 不显示数据
【发布时间】：2020-09-02 10:58:43
【问题描述】：

我尝试了所有方法来显示数据库中的数据。数据来自数据库，但它不会在 UI 上显示任何记录。当我打印 console.log 以获取数据时，它会正确出现。以下是我使用的代码段，我是全新的离子开发，如果我犯了任何错误，请指出。

tab3.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      User List
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-button expand="block" (click)="getData()" >Get All users</ion-button>  
    <ion-list>
      <ion-item *ngFor="let Users of UserList">
            <h2>Hello {{ UserList[Users].fullname.value }}</h2>
            <p item-right> {{Users["email"]}}</p>
            <p>{{Users.phone_no}}</p>
      </ion-item>
    </ion-list>
</ion-content>

tab3.page.ts

import { Component } from '@angular/core';
import { ToastController, AlertController, LoadingController, NavController } from '@ionic/angular';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import {} from '../Login/tab1.module';
import { CommonModule } from "@angular/common";
import { setIndex } from '@ionic-native/core/decorators/common';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {

    UserList:any[];
    LoginName:string = ""; 
    constructor(public navCtrl: NavController, public http: HttpClient) {

    }

    ionViewDidLoad(){
      console.log("Getting Users");
      this.getData(); 
    }

    getData()
    {
      this.http.get("http://localhost/MyFirstApp/GetAllUsers.php")
        .subscribe(
          data => {
                    let UserList = JSON.parse(JSON.stringify(data));
                    console.log(UserList);
                    console.log(UserList[1].fullname);
                    let i=0;
                    for (let Users in UserList){
                        this.LoginName = UserList[Users].fullname;
                    } 

                  }, 
          err => {
                    console.log(err);
                  }
      ); 
    }


}

数据来自console.log窗口中的数据库正确

UserList[
0: {fullname: "shubham", email: "shubham@gmail.com", phone_no: "1230235420"}
1: {fullname: "johan", email: "johan@gmail.com", phone_no: "120356452"}
2: {fullname: "aditya", email: "aditya@gmail.com", phone_no: "120356452"}
]

【问题讨论】：

试着编辑你的 *ngFor 如下<ion-item *ngFor="let user of UserList"> <h2>Hello {{ user.fullname}}</h2> <p item-right> {{user.email]}}</p> <p>{{user.phone_no}}</p> </ion-item>
您没有将类级别变量UserList 设置为任何内容。事实上，你let是subscribe里面的一个同名变量。另外，您的模板代码不正确。不知道为什么这会引起投票。

标签： angular ionic-framework ngfor

【解决方案1】：

三个主要的东西：

您使用了let，这是一个块作用域，因此不会反映在类中。

解决方案： 更改let UserList = JSON.parse(JSON.stringify(data));
到this.UserList = JSON.parse(JSON.stringify(data));。
您遇到了绑定问题，因为您没有将索引放在数组值中，而是传递了一个对象值。

解决方案： 更改{{ UserList[Users].fullname.value }}
到{{Users.fullname}}。
您只对UserList 对象进行了类型注释，因为它用于迭代。

解决方案： 更改UserList:any[];
到UserList:any[]=[];。

【讨论】：

【解决方案2】：

您对变量的引用有误。我猜应该只显示phone_no。您作为数组引用，但它们是 JSON 对象的一部分。

正确的方法应该是：

{{Users.fullname}}
{{Users.email}}
{{Users.phone_no}}

最后，请不要以大写字母开头的变量命名。设为user 而不是User。仅用于类的大写字母。也许，我说也许，代码正在尝试寻找 Users 类，这就是它不起作用的原因......

【讨论】：