Question

我正在尝试使用打字稿创建发票应用程序。我创建了一个Invoice类，该类具有三个对象作为属性，并且在这些对象内它们具有各自的道具。出于测试目的，在构造函数中，我仅传递了item对象的道具。我想创建发票类的实例，并从输入标签的值<input>设置item对象（发票类内）的道具。当我只是为了查看是否创建了对象实例而进行测试时，我总是收到此错误：

无法在新发票上设置未定义的属性“价格”

这是我的代码

// invoice class
class Invoice {
    // fields
    item: {
        price: number;
        partNumber: number;
        partDescription: string;
        quantity: number;
        pricePerItem: number;
        discountApplied: number;
    }

    invoiceState: {
        valid: {
            OK: boolean;
            NOTOK: boolean;
        },
        invalid: {
            price: number;
            inventory: number;
            name: string;
            country: string;
            quantity: number;
        }
    };

    country: {
        countryOrigin: {
            name: string;
            symbol: string;
            hasTaxRate: boolean;
        }

    };

    constructor(price: number, partNumber: number, quantity: number, pricePerItem: number, partDescription: string, discountApplied: number) {
        this.item.price = price;
        this.item.partNumber = partNumber;
        this.item.quantity = quantity;
        this.item.pricePerItem = pricePerItem;
        this.item.partDescription = partDescription;
        this.item.discountApplied = discountApplied;
    }

    // methods
    calcPrice() {

    }

    getInoviceAmount() {

    }
}

// testing
// want to put this var inside the AddItem button and deleteItem and this new instance to the object created
// create a new object tied to that element
let invoiceItem = new Invoice(1, 3, 5, 6, "part", 1);
console.log(invoiceItem);


//  add an item
let addedItem = document.getElementById("addItem").addEventListener("click", () => {
    let table = document.getElementById("table-contents");
    table.insertAdjacentHTML('beforeend', "<tr id='item-info'> <th scope='row'>1</th> <td><input type='text'></td> <td><input type='number'></td> <td><input type='number'></td> <td><input type='number'></td> <td><span></span></td></tr>");
});;

// delete item
let deleteItem = document.getElementById("deleteItem").addEventListener("click", () => {
    let row = document.getElementById("item-info");
    row.remove();
});

这是我的HTML代码：

<table class="table table-striped table-dark invoice-table">
                <thead>
                    <tr class="head-contents">
                        <th scope="col">#</th>
                        <th scope="col-3">Description</th>
                        <th scope="col">Quanity</th>
                        <th scope="col">item number</th>
                        <th scope="col">Item price</th>
                        <th scope="col">total price</th>
                    </tr>
                </thead>
                <tbody id="table-contents">
                    <tr id="item-info">
                        <th scope="row">1</th>
                        <td><input type="text"></td>
                        <td><input type="number"></td>
                        <td><input type="number"></td>
                        <td><input type="number"></td>
                        <td>$<span>0.00</span></td>
                    </tr>
                </tbody>
            </table>

Answer 1

您的item实例中尚未定义

Invoice。在构造函数的第一行中创建它：

constructor(/* ... */) {
  this.item = {};
  /* ... */
}

在定义类的新实例时设置道具

1 个答案: