我正在尝试在组件中使用我的数据服务,但是当我单击按钮时它会给出错误并说数据服务未定义。
这是我的组件文件:
export class ProductsComponent implements OnInit {
dataSource: any;
priority: any[];
e: any;
constructor(public dataService: DataService) {
// data source stuff...
}
ngOnInit() {
console.log(this.dataService) //successfully shows DataService object
}
addToCart(e) {
console.log(e.row.data["Task_Subject"]);
console.log(this.dataService) // undefined?!?
this.dataService.addItem(e.row.data["Task_Subject"])
}
}
以及组件的 HTML 模板:
<h2 class="content-block">Products</h2>
<dx-data-grid class="dx-card wide-card" [dataSource]="dataSource" [showBorders]="false" [focusedRowEnabled]="true"
[focusedRowIndex]="0" [columnAutoWidth]="true" [columnHidingEnabled]="true">
<dxo-paging [pageSize]="10"></dxo-paging>
<dxo-pager [showPageSizeSelector]="false" [showInfo]="true"></dxo-pager>
<dxo-filter-row [visible]="true"></dxo-filter-row>
<dxi-column dataField="Task_ID" [width]="90" [hidingPriority]="2">
</dxi-column>
<dxi-column dataField="Task_Subject" [width]="190" caption="Subject" [hidingPriority]="8">
</dxi-column>
<dxi-column dataField="Task_Status" caption="Status" [hidingPriority]="6">
</dxi-column>
<dxi-column dataField="Task_Priority" caption="Priority" [hidingPriority]="5">
<dxo-lookup [dataSource]="priority" valueExpr="value" displayExpr="name">
</dxo-lookup>
</dxi-column>
<dxi-column dataField="ResponsibleEmployee.Employee_Full_Name" caption="Assigned To" [allowSorting]="false"
[hidingPriority]="7">
</dxi-column>
<dxi-column caption="Actions" type="buttons" [hidingPriority]="0">
<dxi-button icon="plus" [onClick]="addToCart">Action</dxi-button>
</dxi-column>
</dx-data-grid>
当我单击“dxi-button”上的按钮时,addToCart() 函数运行。在 ngOnInit 函数中,数据服务显示出来,但在 addToCart 函数中,控制台日志记录数据服务给我未定义。
我究竟做错了什么?顺便说一句,我正在使用 DevExtreme。