从模板的输入动态形成输入，到服务中的函数- 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() 中的输入 'component' 甚至都没有使用，我收到错误消息：

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'.

我明白了说的是 'component' 不存在于 ChartTools 接口中，但是组件的值存在于 ChartTools 中，我想使用它们。

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

Answer 1

这里有打字稿问题。

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

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

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

该错误阻止您发送缺少属性1 和属性2 的值，因为它不是 ChartTool。

如何解决：使属性1 和属性2 opitonal:

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

    })

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

Dynamically form Input, to a function in Service, from Input from Template- Angular

javascript

dynamic

typescript

angular-material

angular