Question

我正在ionic 3中制作一个应用，并且试图从URL中获取数据。

这是我在 data.ts 中的代码和我的数据提供者：

   getVehicleStatus() {
    return this.http.get<VehicleStatus>(this.url);
  }

这是我的车辆类别：

class VehicleStatus {
    status: string;
    plate: string;
    code: string;
    message: string;
}

我正在将该方法调用到我的 home.ts 文件中。

  ionViewDidLoad() {
    console.log(this.getStatus('test3'));
  }

  getStatus(plate: string) {
    this.dataService.getVehicleStatus()
      .subscribe((data: VehicleStatus) => this.vehiclestatus = [{ ...data }]);
  }

要测试一切是否正常，我对车牌号进行了硬编码，以将其登录到chrome开发人员工具中。它说'Undefined'。

这是json数据的样子：

[{"status":"P","plate":"test2","code:"MGP150151","message":"fail"}
,{"status":"P","plate":"test3","code":"MGP160298","message":"fail"}
,{"status":"P","plate":"test4","code":"MGP140085","message":"succes"}
,{"status":"O","plate":"test5","code":"MGP150175","message":"succes"}]

我应该找回该对象：

{"status":"P","plate":"test3","code":"MGP160298","message":"fail"}

但是它不起作用并且消息未定义。

我使用了以下来源：

https://angular.io/guide/http

如何搜索数组并将其绑定到HTML中的ionic 3页面？？

有人可以指出我正确的方向吗？

亲切的问候。

Answer 1

您需要 array.find 来获取匹配值，该值将返回数组中的第一个匹配元素

 this.vehiclestatus =  data.find(vehicle=>vehicle.plate === plate);

Answer 2

从列表中find VehicleStatus的责任应该是服务而不是组件本身。

请考虑更改您的服务实施以承担该责任。您可以使用map运算符来转换响应，以返回基于VehicleStatus找到的plate，该getVehicleStatus将在调用import { map } from 'rxjs/operators'; import { Observable } from 'rxjs'; getVehicleStatus(plate): Observable<VehicleStatus> { return this.http.get<VehicleStatus[]>(this.url) .pipe( map(statuses => statuses.find(status => status.plate === plate)) ); }方法时作为arg传递。

ionViewDidLoad() {
  this.getStatus('test3');
}

getStatus(plate: string) {
  this.dataService.getVehicleStatus(plate)
    .subscribe((data: VehicleStatus) => this.vehiclestatus = data);
}

然后在您的home.ts中

CREATE TABLE myBD.myTable
        (`name` VARCHAR(90),
        `age` INT                --here I need to make sure it's above 21>,
        PRIMARY KEY (`name`));

如何在JSON数组中选择元素并将其绑定到ionic 3中的视图？

2 个答案: