Проблема загрузки директивы до появления данных - PullRequest
Новая
       8

Проблема загрузки директивы до появления данных

0 голосов
/ 11 января 2019

Представление загружается до данных, поступающих от вызова и передаваемых в директиву Angular4

Я сделал некоторую отладку, но не смог обернуть голову вокруг этой вещи, я думаю, проблема в том, что данные не представлены до загрузки представления. Пожалуйста, помогите мне

Error 

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 с директивой [подсказка - это директива]. «Строка», которую я получаю, происходит от вызова http, который затем обрабатывается и передается в директиву подсказки, которая будет отображаться в формате html

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

ts file 

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

1 Ответ

0 голосов
/ 11 января 2019

Проблема не в директиве, а в строке 575 engagement- fullview.component.ts: 

concatData += data.restrictions[i].type

Значение data.restrictions[i] равно нулю - исправьте это, и вы получите решение.

...