Angular 2 rc2 InvalidCharacterError,不是有效的属性名称

时间:2016-06-22 09:31:47

标签: javascript typescript angular angular2-template angular2-components

我正在创建一个用于显示项目列表的组件,该组件还有两个从中继承的组件(特殊类型的列表)。

我收到以下错误:

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中有所不同。

这是什么问题?我应该提一下,这曾经没有类继承,但我重构了它,因为它有很多共同点。

0 个答案:

没有答案