错误TypeError:无法读取未定义的属性“样式"-Ionic 3，Angular 4 [英] ERROR TypeError: Cannot read property 'style' of undefined - Ionic 3, Angular 4

问题描述

我遇到setElementStyle错误，不确定是什么错误，无法在网上找到任何东西.

I get error for setElementStyle, not sure what is wrong, cant find anything on net.

我正在关注本教程: https://www.youtube.com/watch?v = abDaZnx6tkU

import { Directive, Input, ElementRef, Renderer } from '@angular/core';

@Directive({
  selector: '[hide-header]', // Attribute selector
  host: { '(ionScroll)' : 'onContentScroll($event)'}
})
export class HideHeaderDirective {

  headerHeight;
  scrollContent;

  @Input("header") header : HTMLElement;
  constructor(public element: ElementRef, public renderer: Renderer) {
    console.log('Hello HideHeaderDirective Directive');
  }

  ngOnInit(){
    this.headerHeight = this.header.clientHeight;
    this.renderer.setElementStyle(this.header, 'webkitTransition', 'top 700ms');
    this.scrollContent = this.element.nativeElement.getElementsByClassName("scroll-content")[0];
    this.renderer.setElementStyle(this.scrollContent, 'webkitTransition', 'margin-top 700ms');
  }

  onContentScroll(event){
    console.log("Event: "+JSON.stringify(event));
    if(event.scrollTop > 56){
      this.renderer.setElementStyle(this.header, "top","-56px");
      this.renderer.setElementStyle(this.scrollContent, "margin-top","0px");
    }else{
      this.renderer.setElementStyle(this.header, "top","0px");
      this.renderer.setElementStyle(this.scrollContent, "margin-top","56px");
    }
  }

错误堆栈跟踪

ERROR TypeError: Cannot read property 'style' of undefined
    at DefaultDomRenderer2.setStyle (platform-browser.es5.js:2872)
    at DebugRenderer2.setStyle (core.es5.js:13733)
    at RendererAdapter.setElementStyle (core.es5.js:10517)
    at HideHeaderDirective.webpackJsonp.276.HideHeaderDirective.onContentScroll (hide-header.ts:37)
    at Object.eval [as handleEvent] (FifteenOffPage.html:10)
    at handleEvent (core.es5.js:12022)
    at callWithDebugContext (core.es5.js:13486)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13074)
    at dispatchEvent (core.es5.js:8615)
    at core.es5.js:10783

已更新-html代码

<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":{}}

推荐答案

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

Hope this is the missing part of your code:

即，您没有声明#head

<ion-header #head>

</ion-header>

这篇关于错误TypeError:无法读取未定义的属性“样式"-Ionic 3，Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！