如何解决输入'{可见性:字符串; 'line-join':字符串; 'line-cap':字符串; } | {能见度:字符串; }'不可分配给type
我正在使用带有角的mapbox。然后,我尝试使用mapbox显示/隐藏一些内容。
所以我有这个组件:
export class ToggleLayersComponent implements OnInit {
layouts = {
contours: {
visibility: 'visible','line-join': 'round','line-cap': 'round',},museums: {
visibility: 'visible',};
ngOnInit() {}
toggleLayer(evt: {value: 'contours' | 'museums'}) {
this.layouts[evt.value] = {
...this.layouts[evt.value],visibility: this.layouts[evt.value].visibility === 'visible' ? 'none' : 'visible',};
}
}
但是我得到这个错误:
Type '{ visibility: string; 'line-join': string; 'line-cap': string; } | { visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.
Type '{ visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.
Type '{ visibility: string; }' is missing the following properties from type '{ visibility: string; 'line-join': string;
我当然先用Google搜索。但是我找不到任何解决方案。
那该如何解决呢?
谢谢
所以错误在这一行:
this.layouts[evt.value]
所以我什至不能再运行Angular:
ERROR in src/app/desktop-dashboard/toggle-layer/toggle-layer.component.ts:63:5 - error TS2322: Type '{ visibility: string; 'line-join': string; 'line-cap': string; } | { visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.
Type '{ visibility: string; }' is not assignable to type '{ visibility: string; 'line-join': string; 'line-cap': string; } & { visibility: string; }'.
Type '{ visibility: string; }' is missing the following properties from type '{ visibility: string; 'line-join': string; 'line-cap': string; }': 'line-join','line-cap'
63 this.layouts[evt.value] = {
解决方法
TypeScript
编译器目前还不够“智能”。当您这样做时:
this.layouts[evt.value] = {
...this.layouts[evt.value]
}
它将evt.value
视为类型'contours' | 'museums'
,并且无法推断两次它是相同的值,两次它是相同的对象。基本上是阻止您这样做:
this.layouts['contours'] = {
...this.layouts['museums']
}
在您的示例中,您可以执行以下操作
this.layouts[evt.value].visibility = this.layouts[evt.value].visibility === 'visible'
? 'none'
: 'visible';
但是我想您不想这样做,因为更改检测可能看不到对象引用已更改。如果这对您来说是个问题,那么除了欺骗编译器之外,我别无选择:
toggleLayer(evt: {value: 'contours' | 'museums'}) {
const key = evt.value as 'contours';
this.layouts[key] = {
...this.layouts[key],visibility: this.layouts[key].visibility === 'visible' ? 'none' : 'visible'
};
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。