Question

我想为http响应中的变量赋值。在控制台中，http响应显示值，但变量显示未定义。变量是类的类型。

order.model.ts

import { OrderItem } from './order-item.model';
export class Order {
    OrderId:number;
    OrderNo :string;
    PMethod :String;
    GTotal :number;
    CustomerId :number;
    OrderItems:OrderItem[];    
}

order-item.model.ts

export class OrderItem {
    orderItemId:number;   
    itemId:number;
    quantity:number;
    itemName: string;
    price: number;
    total:number;
}

order.service.ts

import { Injectable } from '@angular/core';
import { Order } from '../_models/order.model';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class OrderService {

  formData:Order;
  baseUrl = environment.apiURL;

  constructor(private http:HttpClient) { }

  getSingleOrder(id:number){
    return this.http.get(this.baseUrl+ 'order/'+id);
  }

}

sorder.component.ts

import { Component, OnInit } from '@angular/core';
import { OrderService } from 'src/app/_services/order.service';
import { NgForm } from '@angular/forms';
import { Order } from 'src/app/_models/order.model';


@Component({
selector: 'app-sorder',
  templateUrl: './sorder.component.html',
  styleUrls: ['./sorder.component.css']
})
export class SorderComponent implements OnInit
{
    constructor(private orderService:OrderService ) { }

  ngOnInit()
{
    let orderId = this.currentRoute.snapshot.paramMap.get('id');

    if (orderId == null)
    {
        this.formDataReset();
    }
    else
    {
        this.getOrderDetail(parseInt(orderId));
    }
}

formDataReset()
{
    this.orderService.formData = {
    OrderId: 0,
      OrderNo: Math.floor(100000 + Math.random() * 900000).toString(),
      CustomerId: 0,
      PMethod: '',
      GTotal: 0,
      OrderItems:[],      
    }
}

getOrderDetail(id:number)
{
    this.orderService.getSingleOrder(id).subscribe((res: Order)=>{
        console.log(res);
        this.orderService.formData = res;
        console.log(this.orderService.formData.OrderId);
    }
    error =>
    {
        console.log(error);
    });
}

}

console.log（res）：

{orderID: 10, orderNo: "161235", pMethod: "Cash", gTotal: 22.42, customerID: 5, …}
customerID: 5
gTotal: 22.42
orderID: 10
orderItems: Array(2)
0:
itemID: 9
name: "Onion Rings"
orderItemID: 5
price: 2.99
quantity: 5
total: 14.950000000000001
__proto__: Object
1:
itemID: 11
name: "Sweet Potato Fries"
orderItemID: 6
price: 2.49
quantity: 3
total: 7.470000000000001
__proto__: Object
length: 2
__proto__: Array(0)
orderNo: "161235"
pMethod: "Cash"
__proto__: Object

console.log（this.orderService.formData.OrderId）：

undefined

我希望变量formdata显示我从http响应i，e获得的值

 OrderId:10;
    OrderNo :"161235";
    PMethod :"Cash";
    GTotal :22.42;
    CustomerId :5;
    OrderItems:[
{orderItemID: 5, quantity: 5, itemID: 9, name: "Onion Rings", price: 2.99, …}
{orderItemID: 6, quantity: 3, itemID: 11, name: "Sweet Potato Fries", price: 2.49, …}
];

谢谢。

Answer 1

您必须在服务类中创建ShellObjectWatcher sow = new ShellObjectWatcher(appFolder, false); sow.AllEvents += (s, e) => DoWhatever(); sow.Start();和set方法。

在您的orderService.ts

get

在您的sorder.component.ts

import { Injectable } from '@angular/core';
import { Order } from '../_models/order.model';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class OrderService {

  formData: any;
  baseUrl = environment.apiURL;

  constructor(private http:HttpClient) { }

  getSingleOrder(id:number){
    return this.http.get(this.baseUrl+ 'order/'+id);
  }

  setFormData(data) {
    this.formData = data;
   }


   getFormData() {
    return this.formData;
   }

}

Answer 2

将界面更改为：

export class Order {
orderItemID:number;
orderNo:string;
pMethod:String;
gTotal :number;
customerID :number;
orderItems:OrderItem[];
total?: number;
quantity?: number;
price? : number;
name? : string;
itemID? : number

}

您的订单界面和“响应”类型不匹配。

Answer 3

您之所以得到undefined，是因为作为响应，您获得了“ orderId”，而您正在访问“ OrderId”。

如何在角度6的http响应中为变量分配值？

3 个答案: