Question

我有一个ProductButton.ts班

export class ProductButton{

    public ProductBtnID: string;
    public ProductID: string;
    public ParentWfTaskID: string;
    public WfTaskID: string;
    public TaskName: string;
    public ButtonText: string;
    public ImageContentID: number;
}

我试图将其导入到我的组件中并创建它的新实例。但我似乎无法为其创建新实例。

这是我的组件类

import { ProductButton } from '../../models/ProductButton';

@Component({
    templateUrl: './product-edit.component.html',
    providers: []
})
export class ProductEditComponent implements OnInit {

    constructor(){}

    addChildTask(){
        if(!this.product.ProductButtons)
            this.product.ProductButtons = [];

        var pButton = new ProductButton();
        pButton.ButtonText = "";
        this.product.ProductButtons.push(pButton);
    }
}

为什么我尝试新建ProductButton的实例，却得到一个没有属性的空对象。每当我点击该方法时如何创建新实例？

Answer 1

ProductButton.ts编译后，您将在原始JavaScript中得到类似的内容。

// Without any properties
var ProductButton = /** @class */ (function () {
    function ProductButton() {
    }
    return ProductButton;
}());

要回答您的问题，您将需要初始化类中的每个属性。

ProductButton.ts

export class ProductButton {
    public ProductBtnID: string;
    public ProductID: string;
    public ParentWfTaskID: string;
    public WfTaskID: string;
    public TaskName: string;
    public ButtonText: string;
    public ImageContentID: number;
    constructor() {

        // Init properties as empty strings
        this.ProductBtnID = "";
        this.ParentWfTaskID = "";
        this.WfTaskID = "";
        this.TaskName = "";
        this.ButtonText = "";
        this.ProductID = ""

        // Init as O becuase type number
        this.ImageContentID = 0
    }
}

但是，如果您只是想验证类/对象的属性，我建议您使用打字稿interface。接口描述了类的公共方面。

ProductButton.ts

export interface ProductButton {
    ProductBtnID: string;
    ProductID: string;
    ParentWfTaskID: string;
    WfTaskID: string;
    TaskName: string;
    ButtonText: string;
    ImageContentID: number;
}

ProductEditComponent.ts

import { ProductButton } from '../../models/ProductButton';

@Component({
    templateUrl: './product-edit.component.html',
    providers: []
})
export class ProductEditComponent implements OnInit {

    constructor(){}

    addChildTask(){
        if(!this.product.ProductButtons)
            this.product.ProductButtons = [];

        var pButton: ProductButton = {
            ProductBtnID: "942u52r",
            ProductID: "AAA12",
            ParentWfTaskID: "ww12223",
            WfTaskID: "242122",
            TaskName: "My Favorite Task",
            ButtonText: "Complete your favorite task!!!",
            ImageContentID: 234212342,
        }

        this.product.ProductButtons.push(pButton);
    }
}

Answer 2

您应该为ProductButton.ts

编写一个构造函数

constructor(productBtn: any) {
  this.ProductBtnID = productBtn.ProductBtnID;
  this.ProductID = productBtn.ProductID;
  // ... rest of the properties.
}

然后，您可以在组件中创建上述类的对象，例如：

let prBtn = new ProductButton(obj)

其中obj是包含属性的对象。

Angular 6和Typescript导入一个在组件中具有属性的类

2 个答案: