日安!
我正在try 使用ngx-echarts 5.2.2在Angular 9中实现一个流水线购物车,因为它是NPM中的推荐版本.在运行ng serve -o
时,我收到错误:NG8002: Can't bind to 'options' since it isn't a known property of 'div'.
代码可以在这里找到Github repo
transaction-fee-line-chart.component.ts的HTML template是:
<div echarts [options]="_chartOption"></div>
前Component file : transaction-fee-line-chart.component.ts名分别是:
import { Component, OnInit, OnDestroy} from '@angular/core';
import { EChartsOption } from 'echarts';
import { Subscription } from 'rxjs';
import { GetTransactionyChannelName_Req } from 'src/app/models/getTransactionByChannelName.model';
import { TransactionFeeDetail } from 'src/app/models/getTransactionByChannelName.model';
import { GetTransactionFeeByChannelNameService } from 'src/app/services/get-transaction-fee-by-channel-name.service';
@Component({
selector: 'app-transaction-fee-line-chart',
templateUrl: './transaction-fee-line-chart.component.html',
styleUrls: ['./transaction-fee-line-chart.component.css']
})
export class TransactionFeeLineChartComponent implements OnInit {
_chartOption : EChartsOption;
subscription : Subscription;
constructor(private service: GetTransactionFeeByChannelNameService) { }
ngOnInit(): void {
console.log("Preparing line chart");
let req_getTransactionFeeByChannelName = new GetTransactionyChannelName_Req();
req_getTransactionFeeByChannelName.channelName = 'XYZ';
req_getTransactionFeeByChannelName.fromDate = '01/01/2023';
req_getTransactionFeeByChannelName.toDate = '31/05/2023';
this.subscription=this.service.getTransactionFeeByChannelName(req_getTransactionFeeByChannelName)
.subscribe((response) => {
console.log(`API Resp : ${JSON.stringify(response)}`);
this._initChartTransactionFeeByChannelName(response.transactions);
});
}
private _initChartTransactionFeeByChannelName(chartData : TransactionFeeDetail[]){
this._chartOption={
tooltip : {
show : true,
},
background : 'transparent',
xAxis: {
type: 'category',
data: chartData.map(m=>m.transactionType)
},
yAxis: {
type: 'value'
},
series: [
{
data: chartData.map(m=>m.totalFee),
type: 'line'
}
]
};
}
}
Service code : get-transaction-fee-by-channel-name.service.ts调用外部API,其响应为:
{
"success": true,
"transactions": [
{
"transactionType": "Transaction-1",
"totalFee": 322.1,
"isFeetoCustomer": "Y"
},
{
"transactionType": "Transaction-2",
"totalFee": 18704.58,
"isFeetoCustomer": "Y"
},
{
"transactionType": "Transaction-3",
"totalFee": 6234.860000000001,
"isFeetoCustomer": "N"
}
]
}
由于代码将与遗留项目合并,因此我无法更改Angular 版本.将不胜感激在这方面的任何帮助.
首先要感谢大家!