예외 : ./NgbTabset 클래스의 오류 NgbTabset - 인라인 템플릿 : 12 : 20 원인 : 정의되지 않은 'templateRef'속성을 읽을 수 없습니다.

angular2의 ui-bootstrap 대신 ng-bootstrap을 사용하고 있습니다. 다음과 같이예외 : ./NgbTabset 클래스의 오류 NgbTabset - 인라인 템플릿 : 12 : 20 원인 : 정의되지 않은 'templateRef'속성을 읽을 수 없습니다.

내 HTML은 다음과 같습니다

<div class="row" style="height: 100%;"> 
    <div class="col-12"> 
    <div class="container" id="contentMain"> 
     <div class="card-my-profile"> 
     <div class="card-image"> 
      <div class="image-wrap"> 
      <div class="image-placholder" data-firstletter="S"></div> 
      </div> 
     </div> 
     <div class="clearfix card-fluid"> 
      <div class=""> 
      <h4 class="title-card">Priya</h4> 
      <div><span class="item-type">Title:</span> Job title</div> 
      <div><span class="item-type">Location:</span> Bangalore</div> 
      </div> 
      <div class=""> 
      <div><span class="item-type">Contact:</span></div> 
      <div><span class="item-type">Email:</span> [email protected]</div> 
      <div><span class="item-type">Experience:</span> 9 years</div> 
      </div> 
     </div> 
     <div class="card-buttons"> 
      <a href class="btn btn-success btn-rounded text-uppercase">Resume <i class="bi_interface-tick small"></i> </a> 
      <div class="text-right"> 
      <a class="inherit small" href>Update?</a> 
      </div> 
      <a [hidden]="!isNotUploaded" href class="btn btn-default btn-rounded text-uppercase">Upload CV</a> 
      <ul class="list-inline list-icons"> 
      <li> 
       <a href target='_blank' class="btn-icon btn-twitter btn-unlinked"> 
       <i class="fa fa-twitter"></i> 
       </a> 
      </li> 
      <li> 
       <a href target='_blank' class="btn-icon btn-linkedin"> 
       <i class="fa fa-linkedin"></i> 
       </a> 
      </li> 
      </ul> 
     </div> 
     </div> 
     <ngb-tabset class="tabs-bordered"> 
     <ngb-tab index="0"> 
      <template ngbTabTitle><i class="bi_doc-briefcase-a"></i> My jobs</template> 
      <div class="clearfix"> 
      <ngb-tabset> 
       <ngb-tab heading="Recommendations"> 
       <div class="row row-slim"> 
        <div class="col-md-6" *ngFor="let i of tmpArr"> 
        <div data-ng-init="card.isRecommended = true" class="panel card-job-listing"> 
         <div class="section-fixed left"> 
         <div class="icon-category"> 
          <i class="bi_web-code"></i> 
         </div> 
         </div> 
         <div class="section-fluid"> 
         <h5 class="title-card">Sales/Business Development</h5> 
         <div class="subtitle-card">Bangalore</div> 
         <div class="mini">5-7yrs</div> 
         <div class="fix-bottom" *ngIf="card.isRecommended"> 
          <a class="inherit" (click)="updateSkillsForRecommendations()" href><i class="bi_interface-circle-cross"></i></a> 
         </div> 
         </div> 
         <div class="section-fixed right"> 
         <a class="btn-favorite" [ngClass]="{'active': card.isFavorite }" href> 
          <i class="fa"></i> 
         </a> 
         <a href="/#/job-description" class="btn btn-default btn-sm btn-action" [hidden]="card.isApplied">VIEW</a> 
         <span class="label-bordered label-cyan" [hidden]="!card.isApplied">Applied</span> 
         </div> 
        </div> 
        </div> 
       </div> 
       </ngb-tab> 
       <ngb-tab heading="Applications"> 
       <div class="row row-slim"> 
        <div class="col-md-6" *ngFor="let i of tmpArr"> 
        <div class="panel card-job-listing with-timeline" data-ng-init="isCollapsed = true;card.isApplied = true"> 
         <div class="panel-body"> 
         <div class="section-fixed left"> 
          <div class="icon-category"> 
          <i class="bi_web-code"></i> 
          </div> 
         </div> 
         <div class="section-fluid"> 
          <h5 class="title-card">Sales/Business Development</h5> 
          <div class="subtitle-card">Bangalore</div> 
          <div class="mini">5-7yrs</div> 
          <div class="fix-bottom" *ngIf="card.isRecommended"> 
          <a class="inherit" href><i class="bi_interface-circle-cross"></i></a> 
          </div> 
         </div> 
         <div class="section-fixed right"> 
          <!-- <a class="btn-favorite" [ngClass]="{'active': card.isFavorite }" href> 
            <i class="fa"></i> 
           </a> --> 
          <a href="/#/job-description" class="btn btn-default btn-sm btn-action" [hidden]="card.isApplied">VIEW</a> 
          <span class="label-bordered label-cyan" [hidden]="!card.isApplied">Applied</span> 
          <a class="btn-viewall small" href (click)="isCollapsed = !isCollapsed"> 
          <span [hidden]="!isCollapsed">View status</span> 
          <span [hidden]="isCollapsed">Hide status</span> 
          </a> 
         </div> 
         </div> 
         <div class="panel-footer section-timeline" uib-collapse="isCollapsed"> 
         <div> 
          <div class="mobile-show">Current status: Screening in progress</div> 
          <ul class="list-unstyled list-timeline mobile-hide"> 
          <li> 
           <div class="timeline-icon success"><i class="bi_interface-tick"></i></div> 
           <div class="timeline-name">Screening in progress</div> 
          </li> 
          <li> 
           <div class="timeline-icon success"><i class="bi_interface-tick"></i></div> 
           <div class="timeline-name">Selected for Interview</div> 
           <!-- <div class="timeline-name">Application Screening - Not considered</div> --> 
          </li> 
          <li> 
           <div class="timeline-icon current">3</div> 
           <div class="timeline-name">Interview/Assessment in progress</div> 
          </li> 
          <li> 
           <div class="timeline-icon failure">4</div> 
           <!-- <div class="timeline-name">Interview/Assessment - Selected</div> --> 
           <div class="timeline-name">Interview/Assessment - Not considered</div> 
          </li> 
          <li> 
           <div class="timeline-icon">5</div> 
           <div class="timeline-name">Job offered</div> 
          </li> 
          </ul> 
         </div> 
         <!-- <div class="text-right small"> 
           <a href (click)="isCollapsed = !isCollapsed">View status</a> 
          </div> --> 
         </div> 
        </div> 
        </div> 
       </div> 
       </ngb-tab> 
       <ngb-tab heading="Favorite jobs"> 
       <div class="row row-slim"> 
        <div class="col-md-6" *ngFor="let i of tmpArr" data-ng-init="card.isFavorite = true"> 
        <div class="panel card-job-listing"> 
         <div class="section-fixed left"> 
         <div class="icon-category"> 
          <i class="bi_web-code"></i> 
         </div> 
         </div> 
         <div class="section-fluid"> 
         <h5 class="title-card">Sales/Business Development</h5> 
         <div class="subtitle-card">Bangalore</div> 
         <div class="mini">5-7yrs</div> 
         <div class="fix-bottom" *ngIf="card.isRecommended"> 
          <a class="inherit" (click)="templateRef.updateSkillsForRecommendations()" href><i class="bi_interface-circle-cross"></i></a> 
         </div> 
         </div> 
         <div class="section-fixed right"> 
         <a class="btn-favorite" [ngClass]="{'active': card.isFavorite }" href> 
          <i class="fa"></i> 
         </a> 
         <a href="/#/job-description" class="btn btn-default btn-sm btn-action" [hidden]="card.isApplied">VIEW</a> 
         <span class="label-bordered label-cyan" [hidden]="!card.isApplied">Applied</span> 
         </div> 
        </div> 
        </div> 
       </div> 
       </ngb-tab> 
      </ngb-tabset> 
      </div> 
     </ngb-tab> 
     <ngb-tab index="1"> 
      <template ngbTabTitle><i class="bi_doc-bookmark"></i> My bookmarks</template> 
      <div class="clearfix"> 
      <ngb-tabset> 
       <ngb-tab heading="Skills"> 
       <div class="row"> 
        <div class="col-sm-6"> 
        <form novalidate> 
         <div class="form-group flex-center"> 
         <input type="text" class="form-control" placeholder="Search skill"> 
         <button class="btn btn-link"><i class="bi_interface-circle-plus"></i></button> 
         </div> 
        </form> 

        </div> 
       </div> 
       <ul class="list-inline"> 
        <li class="tag bookmarked-tag" ngb-dropdown auto-close="outsideClick" 
         *ngFor="let item of tmpArr1;let $index=index;"> 
        <a href ngb-dropdown-toggle id="desiredSkill{{$index}}"> 
         <i class="bi_interface-tick icon-bookmark"></i> 
         SKill {{$index + 1}} <i class="bi_interface-more tag-menu-icon"></i> 
        </a> 
        <ul class="dropdown-menu tag-menu" ngb-dropdown-menu [attr.aria-labelledby]="'desiredSkill'+$index"> 
         <li> 
         <a href>Unfollow</a> 
         </li> 
         <li> 
         <a href>Related Jobs</a> 
         </li> 
        </ul> 
        </li> 
       </ul> 
       </ngb-tab> 
       <ngb-tab heading="Courses"> 
       <section class="learning-carousel pad-t-1 row"> 
        <div class="course-card panel col-lg-10 col-lg-offset-1 col-md-8 col-md-offset-2"> 
        <a href class="btn-favorite pull-right"><i class="fa"></i></a> 
        <img src="http://www.underconsideration.com/brandnew/archives/udacity_logo.png" width="85px" /> 
        <p class="course-title"> 
         Intro to Hadoop and MapReduce for Beginners | Udacity 
        </p> 
        <p class="course-description"> 
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        </p> 
        </div> 
       </section> 
       </ngb-tab> 
      </ngb-tabset> 
      </div> 
     </ngb-tab> 
     </ngb-tabset> 
    </div> 
    </div> 
</div>

을하지만 렌더링 후 오류 다음과 같은 예외 :

"TypeError: Cannot read property 'templateRef' of undefined 
    at DebugAppView._View_NgbTabset4.detectChangesInternal (NgbTabset.ngfactory.js:387:59) 
    at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14) 
    at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44) 
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:8080/vendor.bundle.js:33054:19) 
    at DebugAppView._View_NgbTabset3.detectChangesInternal (NgbTabset.ngfactory.js:331:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14) 
    at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44) 
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:8080/vendor.bundle.js:33054:19) 
    at DebugAppView._View_NgbTabset0.detectChangesInternal (NgbTabset.ngfactory.js:120:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14) 
    at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8080/vendor.bundle.js:33062:19) 
    at DebugAppView._View_MyProfile0.detectChangesInternal (MyProfile.ngfactory.js:980:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14) 
    at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8080/vendor.bundle.js:33062:19) 
    at DebugAppView._View_MyProfile_Host0.detectChangesInternal (MyProfile_Host.ngfactory.js:30:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14) 
    at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44) 
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:8080/vendor.bundle.js:33054:19) 
    at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.ngfactory.js:535:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14) 
    at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44) 
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8080/vendor.bundle.js:33062:19) 
    at DebugAppView._View_AppComponent_Host0.detectChangesInternal (AppComponent_Host.ngfactory.js:31:8) 
    at DebugAppView.AppView.detectChanges (http://localhost:8080/vendor.bundle.js:33036:14) 
    at DebugAppView.detectChanges (http://localhost:8080/vendor.bundle.js:33141:44) 
    at ViewRef_.detectChanges (http://localhost:8080/vendor.bundle.js:33528:20) 
    at http://localhost:8080/vendor.bundle.js:26332:84 
    at Array.forEach (native) 
    at ApplicationRef_.tick (http://localhost:8080/vendor.bundle.js:26332:38) 
    at http://localhost:8080/vendor.bundle.js:26273:105 
    at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7259:26) 
    at Object.onInvoke (http://localhost:8080/vendor.bundle.js:36115:37) 
    at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7258:32) 
    at Zone.run (http://localhost:8080/polyfills.bundle.js:7141:43) 
    at NgZone.run (http://localhost:8080/vendor.bundle.js:36005:62) 
    at Object.next (http://localhost:8080/vendor.bundle.js:26273:81) 
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:8080/vendor.bundle.js:30651:52) 
    at SafeSubscriber.__tryOrUnsub (http://localhost:8080/vendor.bundle.js:54373:16) 
    at SafeSubscriber.next (http://localhost:8080/vendor.bundle.js:54322:22) 
    at Subscriber._next (http://localhost:8080/vendor.bundle.js:54275:26) 
    at Subscriber.next (http://localhost:8080/vendor.bundle.js:54239:18) 
    at EventEmitter.Subject.next (http://localhost:8080/vendor.bundle.js:53991:25) 
    at EventEmitter.emit (http://localhost:8080/vendor.bundle.js:30643:76) 
    at NgZone.checkStable (http://localhost:8080/vendor.bundle.js:36083:40) 
    at NgZone.setHasMicrotask (http://localhost:8080/vendor.bundle.js:36154:14) 
    at Object.onHasTask (http://localhost:8080/vendor.bundle.js:36127:31) 
    at ZoneDelegate.hasTask (http://localhost:8080/polyfills.bundle.js:7320:33) 
    at ZoneDelegate._updateTaskCount (http://localhost:8080/polyfills.bundle.js:7337:26) 
    at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7297:26) 
    at Zone.runTask (http://localhost:8080/polyfills.bundle.js:7181:47) 
    at drainMicroTaskQueue (http://localhost:8080/polyfills.bundle.js:7428:35) 
    at HTMLAnchorElement.ZoneTask.invoke (http://localhost:8080/polyfills.bundle.js:7366:25) 
    ------------- Elapsed: 8 ms; At: Sun Oct 23 2016 20:40:21 GMT-0700 (Pacific Daylight Time) ------------- 
    at Object.onScheduleTask (http://localhost:8080/polyfills.bundle.js:6946:18) 
    at ZoneDelegate.scheduleTask (http://localhost:8080/polyfills.bundle.js:7269:49) 
    at Zone.scheduleMicroTask (http://localhost:8080/polyfills.bundle.js:7195:39) 
    at scheduleResolveOrReject (http://localhost:8080/polyfills.bundle.js:7527:14) 
    at resolvePromise (http://localhost:8080/polyfills.bundle.js:7490:21) 
    at http://localhost:8080/polyfills.bundle.js:7472:13 
    at http://localhost:8080/vendor.bundle.js:51228:25 
    at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7259:26) 
    at Object.onInvoke (http://localhost:8080/vendor.bundle.js:36115:37) 
    at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7258:32) 
    at Zone.run (http://localhost:8080/polyfills.bundle.js:7141:43) 
    at http://localhost:8080/polyfills.bundle.js:7529:57 
    at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7292:35) 
    at Object.onInvokeTask (http://localhost:8080/vendor.bundle.js:36106:37) 
    at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7291:40) 
    at Zone.runTask (http://localhost:8080/polyfills.bundle.js:7181:47) 
    at drainMicroTaskQueue (http://localhost:8080/polyfills.bundle.js:7428:35) 
    at HTMLAnchorElement.ZoneTask.invoke (http://localhost:8080/polyfills.bundle.js:7366:25) 
    ------------- Elapsed: 0 ms; At: Sun Oct 23 2016 20:40:21 GMT-0700 (Pacific Daylight Time) ------------- 
    at Object.onScheduleTask (http://localhost:8080/polyfills.bundle.js:6946:18) 
    at ZoneDelegate.scheduleTask (http://localhost:8080/polyfills.bundle.js:7269:49) 
    at Zone.scheduleMicroTask (http://localhost:8080/polyfills.bundle.js:7195:39) 
    at scheduleResolveOrReject (http://localhost:8080/polyfills.bundle.js:7527:14) 
    at ZoneAwarePromise.then (http://localhost:8080/polyfills.bundle.js:7613:17) 
    at http://localhost:8080/vendor.bundle.js:51206:18 
    at new ZoneAwarePromise (http://localhost:8080/polyfills.bundle.js:7545:29) 
    at Router.runNavigate (http://localhost:8080/vendor.bundle.js:51152:16) 
    at http://localhost:8080/vendor.bundle.js:51143:67 
    at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7259:26) 
    at Object.onInvoke (http://localhost:8080/vendor.bundle.js:36115:37) 
    at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7258:32) 
    at Zone.run (http://localhost:8080/polyfills.bundle.js:7141:43) 
    at http://localhost:8080/polyfills.bundle.js:7529:57 
    at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7292:35) 
    at Object.onInvokeTask (http://localhost:8080/vendor.bundle.js:36106:37) 
    at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7291:40) 
    at Zone.runTask (http://localhost:8080/polyfills.bundle.js:7181:47) 
    at drainMicroTaskQueue (http://localhost:8080/polyfills.bundle.js:7428:35) 
    at HTMLAnchorElement.ZoneTask.invoke (http://localhost:8080/polyfills.bundle.js:7366:25) 
    ------------- Elapsed: 87 ms; At: Sun Oct 23 2016 20:40:21 GMT-0700 (Pacific Daylight Time) ------------- 
    at Object.onScheduleTask (http://localhost:8080/polyfills.bundle.js:6946:18) 
    at ZoneDelegate.scheduleTask (http://localhost:8080/polyfills.bundle.js:7269:49) 
    at Zone.scheduleMicroTask (http://localhost:8080/polyfills.bundle.js:7195:39) 
    at scheduleResolveOrReject (http://localhost:8080/polyfills.bundle.js:7527:14) 
    at ZoneAwarePromise.then (http://localhost:8080/polyfills.bundle.js:7613:17) 
    at Router.scheduleNavigation (http://localhost:8080/vendor.bundle.js:51143:34) 
    at Router.navigateByUrl (http://localhost:8080/vendor.bundle.js:51087:25) 
    at RouterLinkWithHref.onClick (http://localhost:8080/vendor.bundle.js:49996:21) 
    at DebugAppView._View_AppComponent0._handle_click_59_0 (AppComponent.ngfactory.js:764:45) 
    at http://localhost:8080/vendor.bundle.js:33168:24 
    at http://localhost:8080/vendor.bundle.js:46650:36 
    at http://localhost:8080/vendor.bundle.js:46752:111 
    at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7259:26) 
    at Object.onInvoke (http://localhost:8080/vendor.bundle.js:36115:37) 
    at ZoneDelegate.invoke (http://localhost:8080/polyfills.bundle.js:7258:32) 
    at Zone.runGuarded (http://localhost:8080/polyfills.bundle.js:7155:47) 
    at NgZone.runGuarded (http://localhost:8080/vendor.bundle.js:36010:69) 
    at HTMLAnchorElement.outsideHandler (http://localhost:8080/vendor.bundle.js:46752:79) 
    at ZoneDelegate.invokeTask (http://localhost:8080/polyfills.bundle.js:7292:35) 
    at Zone.runTask (http://localhost:8080/polyfills.bundle.js:7181:47) 
    at HTMLAnchorElement.ZoneTask.invoke (http://localhost:8080/polyfills.bundle.js:7362:33)"

출처

2016-10-23 Akhilesh Kumar

여기서'templateRef'는 어떻게 정의되어 있습니까? – BeetleJuice

ng-bootstrap 라이브러리 내부에 정의되어 있습니다. –

내가 관찰 :

모두 ngbTabTitle 및 ngbTabContent

가 정의되어야한다.

 <ngb-tabset> 
     <ngb-tab title="foo" id="1"><template ngbTabContent>Foo</template></ngb-tab> 
     <ngb-tab title="bar" id="2"><template ngbTabContent>Bar</template></ngb-tab> 
     </ngb-tabset>

출처

2016-10-25 03:43:31

이에서 HTML을 변경

: 다음과 같이

다른 title

<ngb-tab> 
       <template ngbTabTitle> 
        SKILLS 
       </template> 
       <template ngbTabContent> 
        ....... 
       </template> 
    </ngb-tab>

사용할 수 있습니다 : 나는 템플릿 태그를 사용하고 있다면 다음과 같이

이 있어야한다

<ngb-tabset> 
    <ngb-tab title="foo" id="1"><template ngbTabContent>Foo</template></ngb-tab> 
    <ngb-tab title="bar" id="2"><template ngbTabContent>Bar</template></ngb-tab> 
    </ngb-tabset>

대상 :

<ngb-tabset> 
    <ngb-tab title="foo" id="1"><ng-template ngbTabContent>Foo</ng-template></ngb-tab> 
    <ngb-tab title="bar" id="2"><ng-template ngbTabContent>Bar</ng-template></ngb-tab> 
    </ngb-tabset>

템플릿에서 ng-template으로 변경합니다. 희망이 도움이됩니다.

출처

2017-12-24 18:52:52 Bigabdoul

예외 : ./NgbTabset 클래스의 오류 NgbTabset - 인라인 템플릿 : 12 : 20 원인 : 정의되지 않은 'templateRef'속성을 읽을 수 없습니다.

답변

관련 문제