顯示多個陣列前端服務使用在Angular2

Question

我一直試圖使用服務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：無需爲您 「爲」 內ngOnInit（）循環，這不是你應該如何訪問這些數據。

您應該查看ngFor doc以瞭解更多信息。

編輯：

正如我說下面我的意見，而你在你的使用情況使用異步數據我以前Plunker使用的原始數據（它是從可觀察到的從服務發送過來）。

爲了使它工作，你必須檢查你的組件是否已經收到數據，然後再嘗試顯示它。爲此，您需要使用* ngIf指令。

新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> 
`, 

你必須創建一個父DIV到一個與你* ngFor指令。在這個父div中，使用* ngIf =「data」指令。除非有一些數據進入數據屬性，否則其中的所有內容都不會顯示。

我在這裏使用了一個if/else與Angular4一起出現的語法。但你並不需要那個。這就是在沒有數據的情況下顯示消息。例如，它可能是一個加載微調器，讓用戶知道他必須等待。

如果你不想使用此的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> 
`, 

希望這有助於:)