Пользовательский интерфейс не обновляется в Angular 2 - PullRequest
Новая
       5

Пользовательский интерфейс не обновляется в Angular 2

0 голосов
/ 11 июня 2018

После получения уведомлений от Firebase я хочу обновить свой orderlists.Для этого я вызываю OrderRequest() внутри другого компонента (используя @ViewChild).В консоли я получаю ответ, но пользовательский интерфейс не обновляется.Что-то не так в моем HTML-файле?

orderlist.html 

<html> 
<body> 
    <div class="scrollit" style="overflow-y:auto;height:350px;"> 
        <table class="table table-bordered">     
            <tr  *ngFor="let ord of AllData.orderList;let i=index">        
                <td> <a> {{ord.orderList.order_ID}} </a></td>
            </tr>  
        </table>
    </div>
</body>
</html>

orderlist.ts 

import{Component,OnInit, Input} from'@angular/core';
import {RootObject}from'./orderlist'; 
import{OrderService}from'../OrderLists/service/OrderLists.service';

@Component({
    selector:'my-order',
    templateUrl:'./order.component.html',
    providers:[OrderService]
})

export class OrderComponent implements OnInit{
    ngOnInit(){
    this. OrderRequest();
      }

        public AllData:RootObject[] =[];
        LocalStorageLoginValue:string; //For localStorage Value
        constructor(private orderservice:OrderService){}
        OrderRequest() {
            let shop_ID = this.shop_ID;
            this.orderservice.OrderService(shop_ID)
            .subscribe(
                data =>
                {
                    this.AllData=data
                    console.log(this.AllData);
                },
                error =>alert(error),
                () =>console.log(this.AllData), 
            )
        }
    }

orderlistModelClass.ts 

export interface RootObject {
    status_code: string;
    status_message: string;
    orderList: OrderList[];
    orderSize: number;
}

export interface OrderList {
    address: Address;
    order: Order[];
    user_ID: string;
    timeStamp: number;
    order_ID: string;
    total_Amount: number;
}

export  interface Order {
    product_Name: string;
    price: string;
    product_ID: string;
    units: string;
    qty: string;
    order_Active: boolean;
}

export  interface Address {
    area?: string;
    city?: string;
    landmark?: string;
    house_No?: string;
    locality?: string;
    pinCode?: string;
}

Это моя структура JSON: 

  {

  "status_code": "200",
  "status_message": "Successfully Authenticated",
  "orderList": [
  {
  "address": {
  "area": null,
  "city": null,
  "landmark": null,
  "house_No": null,
  "locality": null,
  "pinCode": null
  },

  "order": [
  {
 "product_Name": "Super Sugar",
 "price": "400",
 "product_ID": "Product_0",
 "units": "3",
 "qty": "3",
 "order_Active": true
 },
 {
 "product_Name": "Sweet",
 "price": "10",
 "product_ID": "Product_1",
 "units": "5",
 "qty": "3",
 "order_Active": true
 }
 ],

"user_ID": "User_1",
"timeStamp": 1511437347000,
"order_ID": "OID 40D603BCB7",
"total_Amount": 90
},

{
"address": {
"area": null,
"city": null,
"landmark": null,
"house_No": null,
"locality": null,
"pinCode": null
},

"order": [
{
"product_Name": "Super Sugar",
"price": "400",
"product_ID": "Product_0",
"units": "3",
"qty": "3",
"order_Active": true
},
{
"product_Name": "Sweet",
"price": "10",
"product_ID": "Product_1",
"units": "5",
"qty": "3",
"order_Active": true
}
],
"user_ID": "User_1",
"timeStamp": 1511437347000,
"order_ID": "OID 8486300756",
"total_Amount": 90
},

{
"address": {
"area": "Bas1av",
"city": "BLR15",
"landmark": "Op usstop",
"house_No": "#6, 52th Main",
"locality": "Kamalanaga",
"pinCode": "713409"
},

"order": [
{
"product_Name": "sugar",
"price": "30",
"product_ID": "Product_0",
"units": "2",
"qty": "30",
"order_Active": true
},
{
"product_Name": "Rice",
"price": "10",
"product_ID": "Product_1",
"units": "2",
"qty": "3",
"order_Active": true
}
],
"user_ID": "User_0",
"timeStamp": 1511437347000,
"order_ID": "OID D9ECF9C853",
"total_Amount": 90
}
],
"orderSize": 3
}

1 Ответ

0 голосов
/ 12 июня 2018

сначала, пожалуйста, объявите модель в * ngIf, затем запустите итерацию, иначе после загрузки DOM итерация прекратится, потому что AllData не объявлено до загрузки html. 

   <table *ngIf="AllData" class="table table-bordered">     
        <tr  *ngFor="let ord of AllData.orderList;let i=index">        
            <td> <a> {{ord.order['order_ID']}} </a></td>
        </tr>  
    </table>
...