您好我在角度2中使用引导标签和光滑滑块 这是我的代码：
<ul class="nav nav-tabs">
<li class="tab-heading">Short Films</li>
<li><a data-toggle="tab" href="#menu1" (click)="shortLatest()">Latest</a></li>
<li><a data-toggle="tab" href="#menu2" (click)="shortMostLiked()">Most Liked</a></li>
<li><a data-toggle="tab" href="#menu3" (click)="shortMostWatched()">Most Watched</a></li>
</ul>
<div class="tab-content" style="margin-top: 20px;">
<div id="menu1" class="tab-pane fade">
<!--<slick-slider-three class="slick-slider">
Hello
</slick-slider-three>-->
<div *ngIf="shortfilmslatest">
<slick-slider-three class="slick-slider">
<div *ngFor="let film of shortfilmslatest">
<img [src]="film.banner" alt="Banner">
</div>
</slick-slider-three>
</div>
<div *ngIf="!shortfilmslatest">
<!-- Pre load -->
<loader></loader>
</div>
</div>
<div id="menu2" class="tab-pane fade">
<!--<slick-slider-three [shortfilms]=tag></slick-slider-three>-->
<!--<h3>Most Liked</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>-->
<div *ngIf="shortmostliked">
<slick-slider-three class="slick-slider">
<div *ngFor="let liked of shortmostliked">
<img [src]="liked.banner" alt="Banner">
</div>
</slick-slider-three>
</div>
<div *ngIf="!shortmostliked">
<!-- Pre load -->
<loader></loader>
</div>
</div>
<div id="menu3" class="tab-pane fade">
<!--<slick-slider-three [shortfilms]=tag></slick-slider-three>-->
<!--<h3>Most Watched</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>-->
<div *ngIf="shortwatched">
<slick-slider-three class="slick-slider">
<div *ngFor="let film of shortwatched">
<img [src]="film.banner" alt="Banner">
</div>
</slick-slider-three>
</div>
<div *ngIf="!shortwatched">
<!-- Pre load -->
<loader></loader>
</div>
</div>
</div>
和Component的代码是
import {Component, OnInit, Input} from '@angular/core';
import {ShortfilmsService} from './shortfilms.service';
@Component({
selector:'app-shortfilms',
templateUrl:'./shortfilms.component.html',
styleUrls:['./shortfilms.component.css'],
providers:[ShortfilmsService]
})
export class ShortfilmsComponent implements OnInit {
public shortfilmslatest:Array<Object>;
public shortmostliked:Array<Object>;
public shortwatched:Array<Object>;
constructor(private films: ShortfilmsService){
}
ngOnInit(){
// Enable First Tab
$(document).ready(function(){
$('.nav-tabs a[href="#menu1"]').tab('show');
});
// Call function
this.onPageLoad();
}
shortLatest(){
this.shortfilmslatest = this.films.getMovieDetail();
}
shortMostLiked(){
this.shortmostliked = this.films.getMovieDetail();
}
shortMostWatched(){
this.shortwatched = this.films.getMovieDetail();
}
onPageLoad(){
this.shortfilmslatest = this.films.getMovieDetail();
}
}
我面临的是当第一次加载页面时最新标签自动激活并以正确方式显示光滑滑块但是当我点击第二个标签时它应显示第二个滑块但我收到错误：
EXCEPTION: Error in ./ShortfilmsComponent class ShortfilmsComponent - inline template:35:8 caused by: Cannot read property 'add' of null
ErrorHandler.handleError @ error_handler.js:54
next @ application_ref.js:359
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
error_handler.js:56 ORIGINAL EXCEPTION: Cannot read property 'add' of null
ErrorHandler.handleError @ error_handler.js:56
next @ application_ref.js:359
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
error_handler.js:59 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:59
next @ application_ref.js:359
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
error_handler.js:60 TypeError: Cannot read property 'add' of null
at c.b.initADA (eval at webpackJsonp.327.module.exports (scripts.bundle.js:1), <anonymous>:17:18995)
at c.b.init (eval at webpackJsonp.327.module.exports (scripts.bundle.js:1), <anonymous>:17:18886)
at new c (eval at webpackJsonp.327.module.exports (scripts.bundle.js:1), <anonymous>:17:2931)
at r.fn.init.a.fn.slick (eval at webpackJsonp.327.module.exports (scripts.bundle.js:1), <anonymous>:18:9395)
at SlickThreeComponent.webpackJsonp.701.SlickThreeComponent.ngAfterViewInit (slick-three.component.ts:20)
at View_ShortfilmsComponent4.detectChangesInternal (/HomeModule/ShortfilmsComponent/component.ngfactory.js:297)
at View_ShortfilmsComponent4.AppView.detectChanges (view.js:425)
at View_ShortfilmsComponent4.DebugAppView.detectChanges (view.js:620)
at ViewContainer.detectChangesInNestedViews (view_container.js:67)
at CompiledTemplate.proxyViewClass.View_ShortfilmsComponent0.detectChangesInternal (/HomeModule/ShortfilmsComponent/component.ngfactory.js:811)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at CompiledTemplate.proxyViewClass.View_HomeComponent0.detectChangesInternal (/HomeModule/HomeComponent/component.ngfactory.js:126)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
ErrorHandler.handleError @ error_handler.js:60
next @ application_ref.js:359
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
error_handler.js:63 ERROR CONTEXT:
ErrorHandler.handleError @ error_handler.js:63
next @ application_ref.js:359
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
error_handler.js:64 DebugContext {_view: View_ShortfilmsComponent4, _nodeIndex: 2, _tplRow: 35, _tplCol: 8}
ErrorHandler.handleError @ error_handler.js:64
next @ application_ref.js:359
schedulerFn @ async.js:93
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:79
NgZone.triggerError @ ng_zone.js:331
onHandleError @ ng_zone.js:292
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
Subscriber.js:227 Uncaught ViewWrappedError {__zone_symbol__error: Error: Error in ./ShortfilmsComponent class ShortfilmsComponent - inline template:35:8 caused by: Ca…, _nativeError: ZoneAwareError, originalError: TypeError: Cannot read property 'add' of null
at c.b.initADA (eval at webpackJsonp.327.module.ex…, context: DebugContext, __zone_symbol__stack: "Error: Error in ./ShortfilmsComponent class Shortf…HomeModule/HomeComponent/host.ngfactory.js:29:19)"…}
提前致谢...