我正在创建一个用于显示项目列表的组件,该组件还有两个从中继承的组件(特殊类型的列表)。
我收到以下错误:
platform-browser.umd.js:2306 EXCEPTION: Error in src/components/dashboard/dashboard.component.html:2:63BrowserDomAdapter.logError @ platform-browser.umd.js:2306BrowserDomAdapter.logGroup @ platform-browser.umd.js:2316ExceptionHandler.call @ core.umd.js:4300(anonymous function) @ core.umd.js:9667schedulerFn @ core.umd.js:6652SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ core.umd.js:6640onError @ core.umd.js:9154onHandleError @ core.umd.js:9026ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ (program):3XHRImpl.get @ platform-browser-dynamic.umd.js:386DirectiveNormalizer.normalizeTemplate @ compiler.umd.js:11686DirectiveNormalizer.normalizeDirective @ compiler.umd.js:11659(anonymous function) @ compiler.umd.js:14277RuntimeCompiler._loadAndCompileComponent @ compiler.umd.js:14277RuntimeCompiler.resolveComponent @ compiler.umd.js:14257SystemJsComponentResolver.resolveComponent @ core.umd.js:9970resolveNode @ resolve.js:12(anonymous function) @ resolve.js:18resolveNode @ resolve.js:18resolve @ resolve.js:7(anonymous function) @ router.js:167MergeMapSubscriber._tryNext @ mergeMap.js:110MergeMapSubscriber._next @ mergeMap.js:100Subscriber.next @ Subscriber.js:88MergeMapSubscriber.notifyNext @ mergeMap.js:133InnerSubscriber._next @ InnerSubscriber.js:23Subscriber.next @ Subscriber.js:88subscribeToResult @ subscribeToResult.js:16MergeMapSubscriber._innerSub @ mergeMap.js:120MergeMapSubscriber._tryNext @ mergeMap.js:117MergeMapSubscriber._next @ mergeMap.js:100Subscriber.next @ Subscriber.js:88ScalarObservable._subscribe @ ScalarObservable.js:46Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MergeMapOperator.call @ mergeMap.js:75Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MergeMapOperator.call @ mergeMap.js:75Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MapOperator.call @ map.js:54Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MapOperator.call @ map.js:54Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MergeMapOperator.call @ mergeMap.js:75Observable.subscribe @ Observable.js:52(anonymous function) @ Observable.js:82ZoneAwarePromise @ zone.js:584Observable.forEach @ Observable.js:81(anonymous function) @ router.js:179ZoneAwarePromise @ zone.js:584Router.runNavigate @ router.js:157(anonymous function) @ router.js:142ZoneDelegate.invoke @ zone.js:323onInvoke @ core.umd.js:9005ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ core.umd.js:8996ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426setTimeout (async)scheduleTask @ zone.js:1275ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:1290setTimeout @ (program):3setupRouterInitializer @ common_router_providers.js:29ReflectiveInjector_._instantiate @ core.umd.js:6339ReflectiveInjector_._instantiateProvider @ core.umd.js:6272ReflectiveInjector_._new @ core.umd.js:6266ReflectiveInjectorDynamicStrategy.getObjByKeyId @ core.umd.js:5922ReflectiveInjector_._getByKeyDefault @ core.umd.js:6446ReflectiveInjector_._getByKey @ core.umd.js:6418ReflectiveInjector_.get @ core.umd.js:6227(anonymous function) @ core.umd.js:9644(anonymous function) @ core.umd.js:9694ZoneDelegate.invoke @ zone.js:323onInvoke @ core.umd.js:9005ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ core.umd.js:9036NgZone.run @ core.umd.js:9265ApplicationRef_.run @ core.umd.js:9692ApplicationRef_ @ core.umd.js:9643(anonymous function) @ core.umd.js:4833ReflectiveInjector_._instantiate @ core.umd.js:6345ReflectiveInjector_._instantiateProvider @ core.umd.js:6277ReflectiveInjector_._new @ core.umd.js:6266ReflectiveInjectorDynamicStrategy.getObjByKeyId @ core.umd.js:5922ReflectiveInjector_._getByKeyDefault @ core.umd.js:6446ReflectiveInjector_._getByKey @ core.umd.js:6418ReflectiveInjector_._getByReflectiveDependency @ core.umd.js:6408ReflectiveInjector_._instantiate @ core.umd.js:6305ReflectiveInjector_._instantiateProvider @ core.umd.js:6277ReflectiveInjector_._new @ core.umd.js:6266ReflectiveInjectorDynamicStrategy.getObjByKeyId @ core.umd.js:5922ReflectiveInjector_._getByKeyDefault @ core.umd.js:6446ReflectiveInjector_._getByKey @ core.umd.js:6418ReflectiveInjector_.get @ core.umd.js:6227coreLoadAndBootstrap @ core.umd.js:9497bootstrap @ platform-browser-dynamic.umd.js:479(anonymous function) @ main.js:9(anonymous function) @ main.js:19(anonymous function) @ main.js:20__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252link @ system.src.js:3095execute @ system.src.js:3432doDynamicExecute @ system.src.js:798link @ system.src.js:1000doLink @ system.src.js:652updateLinkSetOnLoad @ system.src.js:700(anonymous function) @ system.src.js:512ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ (program):3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ (program):3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:2306 ORIGINAL EXCEPTION: InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': 'ng-reflect-items$' is not a valid attribute name.BrowserDomAdapter.logError @ platform-browser.umd.js:2306ExceptionHandler.call @ core.umd.js:4309(anonymous function) @ core.umd.js:9667schedulerFn @ core.umd.js:6652SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ core.umd.js:6640onError @ core.umd.js:9154onHandleError @ core.umd.js:9026ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ (program):3XHRImpl.get @ platform-browser-dynamic.umd.js:386DirectiveNormalizer.normalizeTemplate @ compiler.umd.js:11686DirectiveNormalizer.normalizeDirective @ compiler.umd.js:11659(anonymous function) @ compiler.umd.js:14277RuntimeCompiler._loadAndCompileComponent @ compiler.umd.js:14277RuntimeCompiler.resolveComponent @ compiler.umd.js:14257SystemJsComponentResolver.resolveComponent @ core.umd.js:9970resolveNode @ resolve.js:12(anonymous function) @ resolve.js:18resolveNode @ resolve.js:18resolve @ resolve.js:7(anonymous function) @ router.js:167MergeMapSubscriber._tryNext @ mergeMap.js:110MergeMapSubscriber._next @ mergeMap.js:100Subscriber.next @ Subscriber.js:88MergeMapSubscriber.notifyNext @ mergeMap.js:133InnerSubscriber._next @ InnerSubscriber.js:23Subscriber.next @ Subscriber.js:88subscribeToResult @ subscribeToResult.js:16MergeMapSubscriber._innerSub @ mergeMap.js:120MergeMapSubscriber._tryNext @ mergeMap.js:117MergeMapSubscriber._next @ mergeMap.js:100Subscriber.next @ Subscriber.js:88ScalarObservable._subscribe @ ScalarObservable.js:46Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MergeMapOperator.call @ mergeMap.js:75Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MergeMapOperator.call @ mergeMap.js:75Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MapOperator.call @ map.js:54Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MapOperator.call @ map.js:54Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MergeMapOperator.call @ mergeMap.js:75Observable.subscribe @ Observable.js:52(anonymous function) @ Observable.js:82ZoneAwarePromise @ zone.js:584Observable.forEach @ Observable.js:81(anonymous function) @ router.js:179ZoneAwarePromise @ zone.js:584Router.runNavigate @ router.js:157(anonymous function) @ router.js:142ZoneDelegate.invoke @ zone.js:323onInvoke @ core.umd.js:9005ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ core.umd.js:8996ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426setTimeout (async)scheduleTask @ zone.js:1275ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:1290setTimeout @ (program):3setupRouterInitializer @ common_router_providers.js:29ReflectiveInjector_._instantiate @ core.umd.js:6339ReflectiveInjector_._instantiateProvider @ core.umd.js:6272ReflectiveInjector_._new @ core.umd.js:6266ReflectiveInjectorDynamicStrategy.getObjByKeyId @ core.umd.js:5922ReflectiveInjector_._getByKeyDefault @ core.umd.js:6446ReflectiveInjector_._getByKey @ core.umd.js:6418ReflectiveInjector_.get @ core.umd.js:6227(anonymous function) @ core.umd.js:9644(anonymous function) @ core.umd.js:9694ZoneDelegate.invoke @ zone.js:323onInvoke @ core.umd.js:9005ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ core.umd.js:9036NgZone.run @ core.umd.js:9265ApplicationRef_.run @ core.umd.js:9692ApplicationRef_ @ core.umd.js:9643(anonymous function) @ core.umd.js:4833ReflectiveInjector_._instantiate @ core.umd.js:6345ReflectiveInjector_._instantiateProvider @ core.umd.js:6277ReflectiveInjector_._new @ core.umd.js:6266ReflectiveInjectorDynamicStrategy.getObjByKeyId @ core.umd.js:5922ReflectiveInjector_._getByKeyDefault @ core.umd.js:6446ReflectiveInjector_._getByKey @ core.umd.js:6418ReflectiveInjector_._getByReflectiveDependency @ core.umd.js:6408ReflectiveInjector_._instantiate @ core.umd.js:6305ReflectiveInjector_._instantiateProvider @ core.umd.js:6277ReflectiveInjector_._new @ core.umd.js:6266ReflectiveInjectorDynamicStrategy.getObjByKeyId @ core.umd.js:5922ReflectiveInjector_._getByKeyDefault @ core.umd.js:6446ReflectiveInjector_._getByKey @ core.umd.js:6418ReflectiveInjector_.get @ core.umd.js:6227coreLoadAndBootstrap @ core.umd.js:9497bootstrap @ platform-browser-dynamic.umd.js:479(anonymous function) @ main.js:9(anonymous function) @ main.js:19(anonymous function) @ main.js:20__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252link @ system.src.js:3095execute @ system.src.js:3432doDynamicExecute @ system.src.js:798link @ system.src.js:1000doLink @ system.src.js:652updateLinkSetOnLoad @ system.src.js:700(anonymous function) @ system.src.js:512ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ (program):3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ (program):3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:2306 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:2306ExceptionHandler.call @ core.umd.js:4312(anonymous function) @ core.umd.js:9667schedulerFn @ core.umd.js:6652SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ core.umd.js:6640onError @ core.umd.js:9154onHandleError @ core.umd.js:9026ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ (program):3XHRImpl.get @ platform-browser-dynamic.umd.js:386DirectiveNormalizer.normalizeTemplate @ compiler.umd.js:11686DirectiveNormalizer.normalizeDirective @ compiler.umd.js:11659(anonymous function) @ compiler.umd.js:14277RuntimeCompiler._loadAndCompileComponent @ compiler.umd.js:14277RuntimeCompiler.resolveComponent @ compiler.umd.js:14257SystemJsComponentResolver.resolveComponent @ core.umd.js:9970resolveNode @ resolve.js:12(anonymous function) @ resolve.js:18resolveNode @ resolve.js:18resolve @ resolve.js:7(anonymous function) @ router.js:167MergeMapSubscriber._tryNext @ mergeMap.js:110MergeMapSubscriber._next @ mergeMap.js:100Subscriber.next @ Subscriber.js:88MergeMapSubscriber.notifyNext @ mergeMap.js:133InnerSubscriber._next @ InnerSubscriber.js:23Subscriber.next @ Subscriber.js:88subscribeToResult @ subscribeToResult.js:16MergeMapSubscriber._innerSub @ mergeMap.js:120MergeMapSubscriber._tryNext @ mergeMap.js:117MergeMapSubscriber._next @ mergeMap.js:100Subscriber.next @ Subscriber.js:88ScalarObservable._subscribe @ ScalarObservable.js:46Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MergeMapOperator.call @ mergeMap.js:75Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MergeMapOperator.call @ mergeMap.js:75Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MapOperator.call @ map.js:54Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MapOperator.call @ map.js:54Observable.subscribe @ Observable.js:52Observable._subscribe @ Observable.js:109MergeMapOperator.call @ mergeMap.js:75Observable.subscribe @ Observable.js:52(anonymous function) @ Observable.js:82ZoneAwarePromise @ zone.js:584Observable.forEach @ Observable.js:81(anonymous function) @ router.js:179ZoneAwarePromise @ zone.js:584Router.runNavigate @ router.js:157(anonymous function) @ router.js:142ZoneDelegate.invoke @ zone.js:323onInvoke @ core.umd.js:9005ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ core.umd.js:8996ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426setTimeout (async)scheduleTask @ zone.js:1275ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:1290setTimeout @ (program):3setupRouterInitializer @ common_router_providers.js:29ReflectiveInjector_._instantiate @ core.umd.js:6339ReflectiveInjector_._instantiateProvider @ core.umd.js:6272ReflectiveInjector_._new @ core.umd.js:6266ReflectiveInjectorDynamicStrategy.getObjByKeyId @ core.umd.js:5922ReflectiveInjector_._getByKeyDefault @ core.umd.js:6446ReflectiveInjector_._getByKey @ core.umd.js:6418ReflectiveInjector_.get @ core.umd.js:6227(anonymous function) @ core.umd.js:9644(anonymous function) @ core.umd.js:9694ZoneDelegate.invoke @ zone.js:323onInvoke @ core.umd.js:9005ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216NgZoneImpl.runInner @ core.umd.js:9036NgZone.run @ core.umd.js:9265ApplicationRef_.run @ core.umd.js:9692ApplicationRef_ @ core.umd.js:9643(anonymous function) @ core.umd.js:4833ReflectiveInjector_._instantiate @ core.umd.js:6345ReflectiveInjector_._instantiateProvider @ core.umd.js:6277ReflectiveInjector_._new @ core.umd.js:6266ReflectiveInjectorDynamicStrategy.getObjByKeyId @ core.umd.js:5922ReflectiveInjector_._getByKeyDefault @ core.umd.js:6446ReflectiveInjector_._getByKey @ core.umd.js:6418ReflectiveInjector_._getByReflectiveDependency @ core.umd.js:6408ReflectiveInjector_._instantiate @ core.umd.js:6305ReflectiveInjector_._instantiateProvider @ core.umd.js:6277ReflectiveInjector_._new @ core.umd.js:6266ReflectiveInjectorDynamicStrategy.getObjByKeyId @ core.umd.js:5922ReflectiveInjector_._getByKeyDefault @ core.umd.js:6446ReflectiveInjector_._getByKey @ core.umd.js:6418ReflectiveInjector_.get @ core.umd.js:6227coreLoadAndBootstrap @ core.umd.js:9497bootstrap @ platform-browser-dynamic.umd.js:479(anonymous function) @ main.js:9(anonymous function) @ main.js:19(anonymous function) @ main.js:20__exec @ system.src.js:1510entry.execute @ system.src.js:3926linkDynamicModule @ system.src.js:3252link @ system.src.js:3095execute @ system.src.js:3432doDynamicExecute @ system.src.js:798link @ system.src.js:1000doLink @ system.src.js:652updateLinkSetOnLoad @ system.src.js:700(anonymous function) @ system.src.js:512ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ (program):3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426XMLHttpRequest.send (async)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ (program):3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:2306 Error: Failed to execute 'setAttribute' on 'Element': 'ng-reflect-items$' is not a valid attribute name.
at Error (native)
at BrowserDomAdapter.setAttribute (http://localhost:8000/node_modules/@angular/platform-browser//bundles/platform-browser.umd.js:2514:21)
at DomRenderer.setElementAttribute (http://localhost:8000/node_modules/@angular/platform-browser//bundles/platform-browser.umd.js:1171:30)
at DomRenderer.setBindingDebugInfo (http://localhost:8000/node_modules/@angular/platform-browser//bundles/platform-browser.umd.js:1192:22)
at DebugDomRenderer.setBindingDebugInfo (http://localhost:8000/node_modules/@angular/core//bundles/core.umd.js:11422:28)
at DebugAppView._View_DashboardComponent0.detectChangesInternal (DashboardComponent.template.js:228:19)
at DebugAppView.AppView.detectChanges (http://localhost:8000/node_modules/@angular/core//bundles/core.umd.js:11841:18)
at DebugAppView.detectChanges (http://localhost:8000/node_modules/@angular/core//bundles/core.umd.js:11945:48)
at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:8000/node_modules/@angular/core//bundles/core.umd.js:11867:23)
at DebugAppView.AppView.detectChangesInternal (http://localhost:8000/node_modules/@angular/core//bundles/core.umd.js:11852:18)
这是我的容器组件(DashboardComponent
)HTML,用于显示列表:
<div class="ui bim-container stackable three column grid">
<div class="column">
<be-ui-list title="PROJECT" type="image" create="true" [items$]="projectItems" itemLimit="6"></be-ui-list>
</div>
<div class="column">
<be-ui-list title="FEED" type="flat" [items$]="projectItems" itemLimit="6"></be-ui-list>
</div>
<div class="column">
<div class="ui segment">
<be-ui-loader [show]="!user"></be-ui-loader>
<div>USER INFORMATION</div>
<div class="ui divider"></div>
<div class="ui fluid">
<div class="content">
<a href="javascript:;"><img class="right floated tiny ui image" src="{{user?.avatar?.src}}"></a>
<h4>{{user?.name}}</h4>
<div class="meta">
<small>{{user?.role}}</small>
<br> <small>{{user?.since | date:'medium'}}</small>
</div>
</div>
</div>
</div>
</div>
</div>
这是顶级组件:
@Component({
directives: [<Type>UILoaderComponent, (forwardRef(() => UIImageListComponent)), (forwardRef(() => UIFlatListComponent)), FORM_DIRECTIVES],
pipes: [<Type>IsArrayNullPipe, <Type>ArrayCountFilterPipe, <Type>ArraySortPipe, <Type>ArrayFilterPipe],
selector: "be-ui-list",
template: `<div class="ui segment">
<be-ui-loader [show]="!(items$ | async | beIsArrayNull)"></be-ui-loader>
<div>
{{title}}
<a *ngIf="create" href="#/project/create" class="ui right floated teal right labeled icon button mini">
<i class="right add icon"></i>
Create project
</a>
</div>
<div class="ui divider"></div>
<div *ngIf="(items$ | async | beIsArrayNull)" class="ui fluid icon input {{loadingClass}}">
<input type="text" [ngFormControl]="searchBox" (keyup)="onKeyUp($event)" placeholder="Search...">
<i class="search icon"></i>
</div>
<div class="error" *ngIf="((items$ | async
| beArrayFilter:[search, 'text']
| beArrayCountFilter:itemLimit)?.length == 0) && (items$ | async | beIsArrayNull)">
Your search yielded no results.
</div>
<div [ngSwitch]="type">
<be-ui-image-list *ngSwitchWhen="'image'"></be-ui-image-list>
<be-ui-flat-list *ngSwitchWhen="'flat'"></be-ui-flat-list>
</div>
</div>`
})
export class UIListComponent implements OnInit {
@Input("items$") items$: Observable<Array<{}>>;
@Input("title") title: string;
@Input("itemLimit") protected itemLimit: number;
@Input("type") type: string;
@Input("create") create: boolean;
protected searchBox: Control = new Control();
protected maxItems: number;
protected loadingClass: string;
protected currentItemCountLimit: number = config.itemCountDesktop;
protected search: string;
constructor() {
this.searchBox.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.map((text: string) => encodeURI(text.trim()))
.subscribe((text: string) => {
this.search = text;
this.loadingClass = "";
});
}
ngOnInit(): void {
this.items$.subscribe((items: Array<{}>) => this.maxItems = items.length);
}
onKeyUp(event: KeyboardEvent): void {
this.loadingClass = "loading";
}
}
我省略了派生类,因为它们仅在html中有所不同。
这是什么问题?我应该提一下,这曾经没有类继承,但我重构了它,因为它有很多共同点。