Question

我一直在尝试使用Typescript在服务 Angular2 中显示前端 div标记中包含多个数组的json文件。有人可以帮忙吗？

此外，如果有人可以通过添加模型和接口类来帮助转换此代码，那将非常有用。

以下是代码：

服务

export class HttpServiceDemo{
    _data: any;

    private url: string = "assets/sample.json"
    constructor(private http: Http){}

    getMyOrder(){
        //return this.http.get(this.url)
                   // .map((response: Response)=> response.json());
                  return this.http.get(this.url)
                .map(res => this.http = res.json().myOrder);
    }

 }

component.ts

export class SimpleHTTPComponentComponent implements OnInit {

data:any;

Order_date:any;
OrderNumber: number;
P_O_Number:number;
Total: number;
Quote_Status: string;
Expiration_Date: any;
Quote_Created_On: any;

  constructor(public vara: HttpServiceDemo) { 

  }

  ngOnInit() {

    //calling myorder from json
    this.vara.getMyOrder().subscribe(response => {
      this.data=response;

       for (var myOrder in this.data) 
      {
        console.log(myOrder, this.data[myOrder]);

        this.Order_date=this.data[myOrder].Order_Date;
        this.OrderNumber=this.data[myOrder].OrderNumber;
        this.P_O_Number=this.data[myOrder].P_O_Number;
        this.Total=this.data[myOrder].Total;
        this.Quote_Status=this.data[myOrder].Quote_Status;
      }
    })

}

sample.json ---------------

 {
        "accOrder":[
        {
            "Order_Date": "10-sep-1981",
            "OrderNumber" : "E12345",
            "P_O_Number": "P12345",
            "Total": "123",
            "Quote_Status": "In Progress"

        },
        {
           "Order_Date": "1-oct-1981",
            "OrderNumber" : "E82398",
            "P_O_Number": "P87815",
            "Total": "265",
            "Quote_Status": "In Progress"

        },
        {
            "Order_Date": "21-nov-1981",
            "OrderNumber" : "E52367",
            "P_O_Number": "P76549",
            "Total": "454",
            "Quote_Status": "In Progress"
        },
        {
            "Order_Date": "10-dec-1981",
            "OrderNumber" : "E42840",
            "P_O_Number": "P23632",
            "total": "123",
            "Quote_Status": "Completed"
        }

    ]
}

Answer 1

你说你的console.log（）显示JSON就好了吗？

然后，您的数据被正确地提取到组件的数据属性中。

您只需使用* ngFor指令在模板中浏览您的属性。

Plunkr：https://plnkr.co/edit/4IdV3OHyNFNi90KXQQHP?p=preview

template: `
    <div>
      <div *ngFor="let order of data.accOrder" style="border: 1px solid lightgrey; padding: 15px; margin: 5px 0;">
    Order_Date : {{ order.Order_Date }} <br>
    OrderNumber : {{ order.OrderNumber }} <br>
    P_O_Number : {{ order.P_O_Number }} <br>
    Total : {{ order.Total }} <br>
    Quote_Status : {{ order.Quote_Status }} <br>
      </div>
    </div>
  `

PS：不需要你的＆＃34; for＆＃34;在ngOnInit（）内循环，这不是你应该如何访问数据。

您应该查看ngFor doc以了解详情。

编辑：

正如我在下面的评论中所说，我之前的Plunker使用原始数据，而您在用例中使用异步数据（它来自您的服务发送的Observable）。

要使其正常工作，您必须在尝试显示之前检查您的组件是否已收到数据。为此，您需要使用* ngIf指令。

New Plunkr：https://plnkr.co/edit/W5qykrh4blplGxTyp8aC?p=preview

template: `
  <div *ngIf="data; else loading">
    <div *ngFor="let order of data.accOrder" style="border: 1px solid lightgrey; padding: 15px; margin: 5px 0;">
      Order_Date : {{ order.Order_Date }} <br>
      OrderNumber : {{ order.OrderNumber }} <br>
      P_O_Number : {{ order.P_O_Number }} <br>
      Total : {{ order.Total }} <br>
      Quote_Status : {{ order.Quote_Status }} <br>
    </div>
  </div>
  <ng-template #loading>Fetching the data from the webservice... Wait 3 seconds !</ng-template>
`,

您必须使用 * ngFor 指令创建父div。在此父div中，使用 * ngIf =＆＃34; data＆＃34; 指令。在 data 属性中存在一些数据之前，其中的所有内容都不会显示。

我在这里使用了与Angular4一起出现的 if / else 语法。但你不需要那样做。这只是在没有数据的情况下显示消息。例如，它可以是一个加载微调器，让用户知道他必须等待。

如果你不想使用这个if / else条件，你可以不这样做：

template: `
  <div *ngIf="data">
    <div *ngFor="let order of data.accOrder" style="border: 1px solid lightgrey; padding: 15px; margin: 5px 0;">
      Order_Date : {{ order.Order_Date }} <br>
      OrderNumber : {{ order.OrderNumber }} <br>
      P_O_Number : {{ order.P_O_Number }} <br>
      Total : {{ order.Total }} <br>
      Quote_Status : {{ order.Quote_Status }} <br>
    </div>
  </div>
`,

希望这有助于：）

使用Angular2中的服务显示从json到前端的多个数组

1 个答案: