angular - 例外：./NgbTabset 类 NgbTabset 中的错误 - 内联模板：12:20 导致：无法读取未定义的属性“templateRef”

Question

我正在使用 ng-bootstrap 作为 angular2 中的 ui-bootstrap 的替代品。

我的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> 9876543210</div>
            <div><span class="item-type">Email:</span> priya@gmail.com</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)"

Answer 1

正如我所观察到的：

两者都ngbTabTitle应该ngbTabContent定义。

如果我使用模板标签，它应该如下：

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

elsetitle可以按如下方式使用：

      <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>

Answer 2

从此更改您的 HTML：

<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>

注意从template到ng-template的变化。希望这可以帮助。