从模板的输入动态地形成输入，到服务中的一个函数 - Angular

Question

假设一个服务有一个主题，你想从一个组件中动态设置它的值。

A.service.ts：

    //ChartTools: zoom?: boolean, pan?: boolean 
    public ChartConfig$: BehaviorSubject<ChartTools> = new BehaviorSubject(this.defaultValues);
    
    public changeChartConfig(config: ChartTools):void{
    const currentValues = this.ptChartToolsConfig$.value;
    
        this.ptChartToolsConfig$.next({
          ...currentValues,
          pan: config.pan,
          zoom: config.zoom
        })
      }

现在在组件A中，我们想通过一个函数来动态设置这个主题：

A.component.html：

<mat-checkbox
   value="zoom"
   [checked]= "ToolsConfig$.zoom"
   (change) = changeChartConfig($event.value, $event.source._checked)
 >

A.component.ts

   ngOnInit():void{
    private ToolsConfig$ = this.A_Service.ChartConfig$.subscribe();
  }

  //cTask['constant']= "zoom" | "pan"
  changeChartConfig(component: cTask['constant'], checked: boolean):void{
    
    this.A_Service.changeChartConfig({
      component : checked
    })
}

但是，甚至没有使用 changeChartConfig() 中的输入“组件”，我得到了错误：

Argument of type '{ component: boolean; }' is not assignable to parameter of type 'ChartTools'.
  Object literal may only specify known properties, and 'component' does not exist in type 'ChartTools'.

我理解是说ChartTools接口中不存在“组件”，但是ChartTools中存在组件的值，我想使用它们。

有人可以帮我解决这个问题吗？

Answer 1

您在这里遇到了打字稿问题。

你的错误是说你期望参数是 ChartTools，但你发送的东西看起来不同。检查您的界面以确保一切正常。此外，如果在界面中您缺少组件属性，请添加它。如果一切正常，请重置您的 VScode

假设您的 ChartTools 界面如下所示：

interface ChartTools {
 property1: string;
 property2: number;
 component: boolean;
}

该错误会阻止您发送缺少 property1 和 property2 的值​​，因为它不是 ChartTool。

如何解决： 将 property1 和 property2 设为可选：

interface ChartTools {
 property1?: string;
 property2?: number;
 component: boolean;
}

使用TS Partials，或在您发送数据时将缺少的参数添加到您的组件中：

changeChartConfig(component: cTask['constant'], checked: boolean):void{
    
    this.A_Service.changeChartConfig({
      component : checked
      missingProp1: 'Some value'
      missingProp2: 'Another value'
    })
}

编辑 如果您试图实现动态属性名称，请这样做：

this.A_Service.changeChartConfig({
      [component] : checked
    // [component] will be parsed instead of being sent in as a string

    })