日安! 我正在try 使用ngx-echarts 5.2.2Angular 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.tsHTML 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"
      }
   ]
}

Attaching screenshot of the error for reference : enter image description here

Angular and Node versions are : enter image description here

由于代码将与遗留项目合并,因此我无法更改Angular 版本.将不胜感激在这方面的任何帮助.

首先要感谢大家!

推荐答案

请将TransactionFeeLineChartComponent个组件添加到Imports数组,这可能是您问题的根本原因!当我们在工艺路由中使用组件时,必须将其添加到定义工艺路由的模块的declarations数组中!

按照documentation,我们需要以不同的方式导入模块NgxEchartsModule

@NgModule({
  declarations: [
    AppComponent,
    TransactionFeeLineChartComponent,     
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts')
    }),
  ],
  providers: [GetTransactionFeeByChannelNameService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Typescript相关问答推荐

具有映射返回类型的通用设置实用程序

如果请求是流,如何等待所有响应块(Axios)

将对象属性转换为InstanceType或原样的强类型方法

我想创建一个只需要一个未定义属性的打字脚本类型

在包含泛型的类型脚本中引用递归类型A<;-&B

Angular NgModel不更新Typescript

如何使我的函数专门针对联合标记?

限制返回联合的TS函数的返回类型

使用2个派生类作为WeakMap的键

为什么TS2339;TS2339;TS2339:类型A上不存在属性a?

在抽象类属性定义中扩展泛型类型

如果判断空值,则基本类型Gaurd不起作用

如何键入对象转换器

如何从抽象类的静态方法创建子类的实例?

更漂亮的格式数组<;T>;到T[]

使用泛型以自引用方式静态键入记录的键

TypeScript:如何使用泛型和子类型创建泛型默认函数?

为什么过滤器不改变可能的类型?

Angular另一个组件的nativeelement未定义

如何确定单元格中的块对 mat-h​​eader-cell 的粘附(粘性)?