[英]Angular 6 and typescript import a class with properties in component
我有一个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
实例我得到一个没有属性的空对象。 每次点击该方法时如何创建一个新实例?
当你的ProductButton.ts
被编译时,你会在 vanilla JavaScript 中得到类似的东西。
// Without any properties
var ProductButton = /** @class */ (function () {
function ProductButton() {
}
return 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
}
}
但是,如果您只想验证类/对象的属性,我建议您使用 typescript interface
。 接口描述了类的公共端。
产品按钮.ts
export interface ProductButton {
ProductBtnID: string;
ProductID: string;
ParentWfTaskID: string;
WfTaskID: string;
TaskName: string;
ButtonText: string;
ImageContentID: number;
}
产品编辑组件.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);
}
}
您应该为ProductButton.ts
编写一个构造函数
constructor(productBtn: any) {
this.ProductBtnID = productBtn.ProductBtnID;
this.ProductID = productBtn.ProductID;
// ... rest of the properties.
}
然后在您的组件中,您可以创建上述类的对象,例如:
let prBtn = new ProductButton(obj)
其中obj
是包含属性的对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.