如何在ionic 3中读取json对象中的属性值

Question

我正在使用 ionic 3 开发一个项目，并尝试在我的应用程序中使用 php 和 mysql 实现登录功能。但我从 json 对象读取数据以说明情况时遇到问题， 我的数据库中有一个名为“user”的表，我用 php 提取了所有记录并将它们显示为 json 格式，如下所示：

<?php
header("Access-Control-Allow-Origin: *");
include ("cnx.php");
$query="select * from ionic_test ";
$result=$cnx->query($query);

$rs['user']=[];
while($record=$result->fetch(PDO::FETCH_ASSOC)){
  $rs['user'][]=$record;
}
echo json_encode($rs);

我得到了这个结果：

 {"user":[{"user":"abdel","pwd":"abdel"}]}

所以，在我的 ionic 项目中，我创建了一个服务，它将连接到 php 页面并从中获取上面显示的结果：

@Injectable()
export class AuthProvider {
  private url:string
  constructor(public http: HttpClient) {
  this.url='http://localhost/ionic%20login/api.php'
  }

  getusers(){
   return this.http.get(this.url)
  }

现在，当我尝试读取 httpClint 请求返回的数据时，我遇到了问题，我实际上不知道如何访问该数据，我尝试了很多方法来读取它，但没有一个主题适用于我，结果总是“未定义”：

 constructor(public navCtrl: NavController,private authProvider:AuthProvider) {    
  }

  ngOnInit(){
    this.authProvider.getusers().subscribe(
      (data)=>{
        console.log(data);
      },
      error=>{
        console.log(error);
      }
    )
  }

我想从 json 对象中读取的数据是这样的：

我希望这足以说明我的问题，如果有人可以帮助我解决这个问题，我将不胜感激。

任何使用 ionic 3 php 和 mysql 进行登录功能的建议或方法也值得赞赏。

Answer 1

您可以告诉HttpClient 响应的类型，以便更轻松、更明显地使用输出。

可以使用类型参数对响应进行类型检查

 export interface Response {
      user: string;
      pwd: string;

    }

Http 返回一个observable，我们可以告诉HttpClient.get 返回response 作为响应类型当我们使用http.get<Response[]>(...) 时，它返回Observable<Response[]> 类型的实例。
为您服务

 import { Observable } from 'rxjs/Observable';
    import {Response} from './responseModel'
        @Injectable()
        export class AuthProvider {
          private url:string
          constructor(public http: HttpClient) {
          this.url='http://localhost/ionic%20login/api.php'
          }

      getusers()Observable<Response[]>{
       return this.http.get<Response[]>(this.url)
      }

在您的组件中订阅 Observable<Response> 以获取响应实例

 public response=[];
 constructor(public navCtrl: NavController,private authProvider:AuthProvider) {    
  }

  ngOnInit(){
    this.authProvider.getusers().subscribe(
      (data)=>{
        this.response=data;
      },
      error=>{
        console.log(error);
      }
    )
  }