Angular 数据出现前视图中的指令加载问题

视图在数据之前加载，该数据是从调用传入的，并传递给Angular 4中的指令

我做了一些调试，但无法理解这件事，我想问题是在加载视图之前数据不存在

错误：

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调用，然后对该调用进行处理并传递给tooltip指令，以在html中呈现

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

---

问题不在于指令，而在于

接合-fullview.component.ts

的第575行：

concatData += data.restrictions[i].type

---

data.restrictions[i]

为空-修复此问题，您将获得解决方案

显示您的

engagement-fullview.component.ts:575

（575是行号）另外显示您的所有

dataFortooltip方法

ok行575是：concatData+=data.restrictions[i]。type这意味着

data.restrictions[i]

未定义-调试它以获得答案“为什么”是的，我已调试它，我正在获取数据，我觉得视图在数据可用之前就呈现出来了，我已经传递了一个字符串，并且能够打印它的数据。当我调试我需要的另一个帮助时，限制[I]是可用的，如果你知道因果报应，Jasmine with Angular4，我昨天发布了一个查询，如果你能帮我，那就太好了，Thankstorry-我对Karma和Jasmine的知识和经验是poorok知道的，实际上在查找数组时，我在for循环中监督了一个输入错误。长度，谢谢

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

concatData += data.restrictions[i].type