Angular 错误类型错误：无法读取属性'；风格'；未定义的-离子3，角4

我发现setElementStyle有错误，不确定出了什么问题，在网上找不到任何东西

我将学习本教程：

错误堆栈跟踪 更新-html代码

事件：{“timeStamp”：2202730.5850000004，“scrollTop”：84，“scrollLeft”：0，“scrollHeight”：689，“scrollWidth”：365，“contentHeight”：525，“contentWidth”：382，“contentTop”：56，“contentBottom”：56，“startY”：1，“startX”：0，“deltaY”：83，“deltaX”：0，“velocityY”：-8.687176879380104，“velocityX”：0，“directionY”：“down”，“directionX”：“directionX”：“right”，“fixedElement”：“{}”，scrollElement:{}，“contentElement”：{“{uuuu zone\u symbol\uuuu ionScrollfalse”：[{”type:“eventTask”，“state:“scheduled”，“source:“HTMLElement.addEventListener:ionScroll”，“zone:“angular”，“runCount:”0}]}，“headerElement:{}

希望这是您代码中缺少的部分：

即您没有声明

#头

<ion-header #head>

</ion-header>

这会起作用的：

ngOnInit(): void {
    this.headerHeight = this.header.clientHeight;
    console.log('in ngOnInit',this.header['_elementRef']['nativeElement'])
    this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'webkitTransition','top 700ms');  

}
  onContentScroll(event:any):void{
    if (event.scrollTop > 56) {
      this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'top','-56px');
    }else{
      this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'top','0px');
    }
  }

从日志中，您将注意到它是DOM所在的位置

---

如果它仍然不起作用，只需确保你的头在ion header中，并删除上面制作的MOD。

你是否在ionViewDidLoad而不是ngOnInit上尝试了你的代码？@Alberick0是的，我也尝试过。滚动应用程序崩溃时页面加载很好。@Alberick0我已经添加了我正在尝试遵循的教程链接和整个错误堆栈跟踪。你能解释一下吗您的

构造函数的
code
如何运行？@Sampath我已经添加了构造函数和所有导入。当我检查console.log时，我看到
HideHeader指令
已成功加载。另外，在滚动条上，我可以捕获
事件
的所有数据。问题只在于样式，clientHeightI现在得到：
TypeError:Cannot设置未定义的属性“WebKittTransition”
从何处获取？请在重新启动live server后重试。我进入以下行：
this.renderer.setElementStyle（this.header，'WebKittTransition'，'top 700ms'）；
我正在检查所有的样式，并且这可以
this.renderer.setElementStyle（this.scrollContent，“margin top”，“0px”）；
但是我得到了这一行的
top未定义
：
this.renderer.setElementStyle（this.header，“top”，“-56px”）
还有WebKittTransition。我能看到所有属性类型的文档吗？你能分享一份关于这个问题的最低限度的git回购协议吗？或者，对不起，伙计们，更正一下：只需检查一下你的#头是否在ion头上，可能是你放错地方了吗
<ion-content hide-header [header]="head">
</ion-content>

Event: {"timeStamp":2202730.5850000004,"scrollTop":84,"scrollLeft":0,"scrollHeight":689,"scrollWidth":365,"contentHeight":525,"contentWidth":382,"contentTop":56,"contentBottom":56,"startY":1,"startX":0,"deltaY":83,"deltaX":0,"velocityY":-8.687176879380104,"velocityX":0,"directionY":"down","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__ionScrollfalse":[{"type":"eventTask","state":"scheduled","source":"HTMLElement.addEventListener:ionScroll","zone":"angular","runCount":0}]},"headerElement":{}}

<ion-header #head>

</ion-header>

ngOnInit(): void {
    this.headerHeight = this.header.clientHeight;
    console.log('in ngOnInit',this.header['_elementRef']['nativeElement'])
    this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'webkitTransition','top 700ms');  

}
  onContentScroll(event:any):void{
    if (event.scrollTop > 56) {
      this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'top','-56px');
    }else{
      this.renderer.setElementStyle(this.header['_elementRef']['nativeElement'], 'top','0px');
    }
  }