从Template- Angular的Input中动态地给Service中的一个函数形成Input

Question

假设服务有一个Subject，您希望从组件动态设置其值。

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

我明白它说'组件'不存在于界面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 partial，或者在发送数据时将缺少的参数添加到组件中:

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
})