Question

该视图正在加载来自调用的数据并传递给Angular4中的指令之前的数据

我做了一些调试，但是无法解决这个问题，我猜问题是在加载视图之前数据不存在。请帮帮我

错误

ERROR TypeError: Cannot read property 'type' of undefined
at EngagementFullviewComponent.dataFortooltip (engagement- 
fullview.component.ts:575)
at Object.eval [as updateDirectives] (EngagementFullviewComponent.html:198)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)
at checkAndUpdateView (core.es5.js:12251)
at callViewAction (core.es5.js:12599)
at execEmbeddedViewsAction (core.es5.js:12557)
at checkAndUpdateView (core.es5.js:12252)
at callViewAction (core.es5.js:12599)
at execEmbeddedViewsAction (core.es5.js:12557)
at checkAndUpdateView (core.es5.js:12252)

带有指令的HTML [tooltip是指令]。我得到的“行”来自http调用，然后将其处理并传递到工具提示指令，以html呈现

<img src="assets/images/restriction.png" tooltip="{{dataFortooltip(row)}}">

ts文件

    dataFortooltip(data){
    let concatData;
    debugger;
    if(data.restrictions){
    for(let i=0;i<=data.restrictions.length;i++){
    concatData += data.restrictions[i].type
        }
    return concatData;
    }

tooltip.directive.ts

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

   @Directive({
   selector: '[tooltip]'
   })
   export class TooltipDirective {
   @Input('tooltip') tooltipTitle: string;
   @Input() placement: string;
   @Input() delay;
   tooltip: HTMLElement;
   offset = 10;

   constructor(private el: ElementRef, private renderer: Renderer2) { }

   @HostListener('mouseenter') onMouseEnter() {
   if (!this.tooltip) { this.show(); }
     }

   @HostListener('mouseleave') onMouseLeave() {
   if (this.tooltip) { this.hide(); }
   }

   show() {
   this.create();
   this.setPosition();
   this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
   }

   hide() {
   this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
   //window.setTimeout(() => {
   this.renderer.removeChild(document.body, this.tooltip);
   this.tooltip = null;
   //}, this.delay);
   }

   create() {
   this.tooltip = this.renderer.createElement('span');

   this.renderer.appendChild(
   this.tooltip,
   this.renderer.createText(this.tooltipTitle) // textNode
    );

   this.renderer.appendChild(document.body, this.tooltip);
    // this.renderer.appendChild(this.el.nativeElement, this.tooltip);

   this.renderer.addClass(this.tooltip, 'ng-tooltip');
   this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);

   // delay 
   this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity 
   ${this.delay}ms`);
   this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity 
   ${this.delay}ms`);
   this.renderer.setStyle(this.tooltip, '-o-transition', `opacity 
   ${this.delay}ms`);
   this.renderer.setStyle(this.tooltip, 'transition', `opacity 
   ${this.delay}ms`);
   }

   setPosition() {
   const hostPos = this.el.nativeElement.getBoundingClientRect();

   const tooltipPos = this.tooltip.getBoundingClientRect();

    const scrollPos = window.pageYOffset || 
   document.documentElement.scrollTop || document.body.scrollTop || 0;

   let
   top, left;

   if (this.placement === 'top') {
   top = hostPos.top - tooltipPos.height - this.offset;
    left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
   }

   if (this.placement === 'bottom') {
   top = hostPos.bottom + this.offset;
   left = hostPos.left + (hostPos.width -
   tooltipPos.width) / 2;
   }

   if (this.placement === 'left') {
   top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
   left = hostPos.left - tooltipPos.width - this.offset;
   }

   if (this.placement === 'right') {
   top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
   left = hostPos.right + this.offset;
   }

   this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
   this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
   }
  }

Answer 1

问题不在于指令，而是engagement- fullview.component.ts的第575行：

concatData += data.restrictions[i].type

data.restrictions[i]为空-对此进行修复，您将获得解决方案。

在存在数据之前在视图中发出指令加载问题

1 个答案: