如何在angular 4 中创建接口类型的对象？

Question

我正在开发单页购物商店，但遇到了一个小问题。我一直在尝试定义一个接口类型的对象，但我无法在该对象中保存任何值。

这是我的代码

interface ICartItem2 {
    total_items: number;
    total_sum: number;
}

    items: Array<ICartItem> = []; //array of objects working fine
    totals:  ICartItem2; //this is my faulty object of type interface ICartItem2 
    total_items:number=0;
    total_sum:number = 0;
    cart: ICartItem;
    broadcast_obj = {items:[],totals:{}}; //object to store array of objects and single object

主要问题是这一行

totals:  ICartItem2;

它在声明时没有显示错误，但是当我在此对象中存储值然后显示主对象时，在下一行显示未定义。

this.totals = {total_items:this.total_items,total_sum:this.total_sum}

console.log(this.broadcast_obj.totals); // showing undefined

我对对象数组也做了同样的事情，它工作正常

this.cart = {id:id, name: itemText, price: amount,quantity:1};
this.items.push(this.cart);

当我在控制台中显示时(this.broadcast_obj.items); //显示正常。

这是完整的代码

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
interface ICartItem {
    id: number;
    name: string;
    price: number;
    quantity: number;
}
interface ICartItem2 {
    total_items: number;
    total_sum: number;
}
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {

    items: Array<ICartItem> = []; 
    totals:  ICartItem2;
    total_items:number=0;
    total_sum:number = 0;
    cart: ICartItem;
    broadcast_obj = {items:[],totals:{}};
    duplicate:ICartItem ;
    constructor(private _data: DataService) {  }

    ngOnInit() {
        //this.items_count = this.cart.length;
        this._data.cast.subscribe(res => this.broadcast_obj = res);
        this._data.changeCart(this.broadcast_obj);
    }

    additem(id,itemText,amount){
        if(this.items.length==0){//no item in the array
            this.cart = {id:id, name: itemText, price: amount,quantity:1};
            this.items.push(this.cart);
        }
        else{
            this.duplicate = this.items.find(x => x.id == id);//check if item already exists in the cart
            if (this.duplicate === null || this.duplicate === undefined) { //item object not found in the array
                this.cart = {id:id, name: itemText, price: amount,quantity:1};
                this.items.push(this.cart);
            }
            else if(this.duplicate.id===id){
                this.duplicate.quantity++;
            }
        }

        this.broadcast_obj.items = this.items;
        this.total_items++;
        this.total_sum += amount;
        this.totals = {total_items:this.total_items,total_sum:this.total_sum}

        console.log(this.broadcast_obj.totals);
        this._data.changeCart(this.broadcast_obj);
    }

}

头部组件代码

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

interface ICartItem {
    id: number;
    name: string;
    price: number;
    quantity: number;
}
interface ICartItem2 {
    total_items: number;
    total_sum: number;
}


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
    cart: Array<ICartItem> = [];
    totals:  ICartItem2;
    total_items:number = 0;
    total_sum:number = 0;
    showHide: false; 
    constructor(private _data: DataService) {

    }

    ngOnInit() {
        this._data.cast.subscribe(res =>{
            this.cart = res.items;
            this.total_items = res.totals.total_items;
            //this.total_sum =   res.totals.total_sum;
        });
    }

    addClass(toggle) {
        console.log(this.total_items);
        this.showHide = toggle;
    }

}

服务代码

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {

    private cartobj = new BehaviorSubject<any>({});
    cast = this.cartobj.asObservable();

    constructor() { }

    changeCart(item_param) {
        this.cartobj.next(item_param);
    }

}

Answer 1

您正在用 this.items 填充 this.broadcast_obj 的 items 属性。但是你让 totals 属性未初始化。因此它显示为未定义。如果你这样做 console.log(this.totals) 你会得到正确的输出。我相信你需要在 this.totals = {total_items:this.total_items,total_sum:this.total_sum}

之后添加 this.broadcast_obj.totals = this.totals;

编辑

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
interface ICartItem {
    id: number;
    name: string;
    price: number;
    quantity: number;
}
interface ICartItem2 {
    total_items: number;
    total_sum: number;
}
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {

    items: Array<ICartItem> = []; 
    totals:  ICartItem2;
    total_items:number=0;
    total_sum:number = 0;
    cart: ICartItem;
    broadcast_obj = {items:[],totals:{}};
    duplicate:ICartItem ;
    constructor(private _data: DataService) {  }

    ngOnInit() {
        //this.items_count = this.cart.length;
        this._data.cast.subscribe(res => this.broadcast_obj = res);
        this._data.changeCart(this.broadcast_obj);
    }

    additem(id,itemText,amount){
        if(this.items.length==0){//no item in the array
            this.cart = {id:id, name: itemText, price: amount,quantity:1};
            this.items.push(this.cart);
        }
        else{
            this.duplicate = this.items.find(x => x.id == id);//check if item already exists in the cart
            if (this.duplicate === null || this.duplicate === undefined) { //item object not found in the array
                this.cart = {id:id, name: itemText, price: amount,quantity:1};
                this.items.push(this.cart);
            }
            else if(this.duplicate.id===id){
                this.duplicate.quantity++;
            }
        }

        this.broadcast_obj.items = this.items;
        this.total_items++;
        this.total_sum += amount;
        this.totals = {total_items:this.total_items,total_sum:this.total_sum}
        console.log(this.totals)            //Should give you valid log
        this.broadcast_obj.totals = this.totals; //Added as per my answer
        console.log(this.broadcast_obj.totals);
        this._data.changeCart(this.broadcast_obj);
    }

}

如何在angular 4 中创建接口类型的对象？

How to create object of type interface in angular 4?

object

angular2-directives

angular