在页面中输入JSON数据

我是Angular Ionic框架的新手，目前也在努力在输入栏中输入一些数字。如何将JSON数据包含到我的页面中，以便只能输入JSON数据？我已经在控制台上看到了JSON数据

这是我的示例JSON数据

   {
        "Number": "381238",
        "Status": "In Progress",

    }

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
    private status: any[];
    constructor(private http: HttpClient){}

    getLocalData(){
      return this.http.get("assets/data/data.json");
    }

    getRemoteData(){
      return this.http.get("");
    }

    public getStatusFor(trackingNumber: string): string {
    return this.status.filter(state => state.Number === trackingNumber).status;
}
}

这是我输入栏的html代码

<div class="ion-padding basic">
Enter Tracking Number
<div><input type="text" name="track"></div>
</div>

这是给home.page.ts的

import { Component } from '@angular/core';
import { DataService } from '../services/data.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  providers: [DataService]
})
export class HomePage {
  status;
  constructor(private dataService: DataService) {}


  ngOnInit() {
    this.dataService.getLocalData().subscribe(data => {
      console.log("Local Data:");
      console.log(data);
      this.status = data;
    });
  }

}

---

使用ngModel进行输入并检查它是否等于json中的数字，然后显示按钮继续执行

*ngIf

，并将

对象状态发送到下一页

类似于：

    <div class="ion-padding basic">
      Enter Tracking Number
      <div><ion-input type="text" [(ngModel)]="track" name="track"></ion-input></div>
      <button *ngIf="track == myData.Number" ion-button full (click)="toStatusPage(myData.Status)">Proceed</button>
    </div>

使用ngModel进行输入并检查它是否等于json中的数字，然后显示按钮继续执行
*ngIf
，并将
对象状态发送到下一页

类似于：

    <div class="ion-padding basic">
      Enter Tracking Number
      <div><ion-input type="text" [(ngModel)]="track" name="track"></ion-input></div>
      <button *ngIf="track == myData.Number" ion-button full (click)="toStatusPage(myData.Status)">Proceed</button>
    </div>

我想这就是你的意思

您有一个页面，在该页面中，您将跟踪编号作为输入，重新路由到另一个页面并显示状态

解决方案：

最佳实践是，组件不应直接获取数据，也不应提供虚假数据，即使用于测试。因此，将json放在服务中。然后从该服务获取任何组件中的数据

该服务甚至可以有一个接受跟踪号码并返回状态的方法。
也就是说，您可以执行以下操作之一

路由到显示跟踪状态的页面，并将跟踪编号作为查询参数传递。在要显示跟踪状态的页面中，从激活的路由快照读取参数，并从json获取跟踪编号的状态
（通过服务呼叫）并显示状态。就这样

检查是否可以在与输入字段相同的页面中显示状态。如果是这样，只要用户输入跟踪id，就可以从json数据（通过服务调用）获取状态

编辑

使用您添加的代码，您可以

1） 在服务中有一个属性，该属性保存获取的json。像

private status: any[];

2） 在订阅中，您将在其中记录数据。填充此属性

this.status = data;

3） 添加一个返回给定跟踪编号状态的方法

public getStatusFor(trackingNumber: string): string {
    return this.status.filter(state => state.Number === trackingNumber).Status;
}

4） 最后，在重定向页面中，使用所需的跟踪号码调用此函数

意见：-


将json对象的键设置为驼峰大小写
确保跟踪编号的数据类型类似于字符串或数字
我想这就是你的意思

您有一个页面，在该页面中，您将跟踪编号作为输入，重新路由到另一个页面并显示状态

解决方案：

最佳实践是，组件不应直接获取数据，也不应提供虚假数据，即使用于测试。因此，将json放在服务中。然后从该服务获取任何组件中的数据

该服务甚至可以有一个接受跟踪号码并返回状态的方法。
也就是说，您可以执行以下操作之一

路由到显示跟踪状态的页面，并将跟踪编号作为查询参数传递。在要显示跟踪状态的页面中，从激活的路由快照读取参数，并从json获取跟踪编号的状态
（通过服务呼叫）并显示状态。就这样

检查是否可以在与输入字段相同的页面中显示状态。如果是这样，只要用户输入跟踪id，就可以从json数据（通过服务调用）获取状态

编辑

使用您添加的代码，您可以

1） 在服务中有一个属性，该属性保存获取的json。像

private status: any[];

2） 在订阅中，您将在其中记录数据。填充此属性

this.status = data;

3） 添加一个返回给定跟踪编号状态的方法

public getStatusFor(trackingNumber: string): string {
    return this.status.filter(state => state.Number === trackingNumber).Status;
}

4） 最后，在重定向页面中，使用所需的跟踪号码调用此函数

意见：-


将json对象的键设置为驼峰大小写
确保跟踪编号的数据类型类似于字符串或数字
我应该将我的所有数据都放在我的ts文件中？你可以创建一个服务，或者将其存储在数据库中，这只是一个示例。从你下面的评论中，我知道，你无法从服务中获取数据。然后显示您的代码。您好，我在问题中添加了服务和.ts代码。我应该将我的所有数据放在我的ts文件中吗？您可以创建一个服务，或者将其存储在数据库中，这只是一个示例。从您下面的评论中，我看到，您无法从该服务获取数据。然后显示您的代码。您好，我在问题中添加了服务和.ts代码。我已经为我的json创建了一个服务并加载了它。我不知道如何从服务获取任何组件/页面中的数据。请在组件中创建服务实例。访问组件中服务的方法。创建和使用服务是angular的基本组成部分。别难过，但请浏览《英雄之旅》，它将帮助你开始使用angular.quick链接服务。如果答案有帮助，请接受。谢谢！但我在将JSON数据加载/应用到我的页面时仍然遇到问题。当我将“this.status=data；”放入subscribe:Property“status”中时，收到一个错误，该属性在类型“HomePage”上不存在。我已经在我的数据服务中添加了“private status:any[]；”。我将把第3个（方法）也放在数据服务中是否正确？我已经为我的json创建了一个服务并加载了它。我不知道如何从服务获取任何组件/页面中的数据。请在组件中创建服务实例。访问组件中服务的方法。创建和使用服务是angular的基本组成部分。别难过，但请浏览《英雄之旅》，它将帮助你开始使用angular.quick链接服务。如果答案有帮助，就接受它