Question

我是角色2世界的新手。我的演示应用程序在控制台中显示以下错误：

browser_adapter.ts:88EXCEPTION: Unexpected directive value 'undefined' on the View of component 'Reddit'
browser_adapter.ts:88EXCEPTION: Error: Uncaught (in promise): Unexpected directive value 'undefined' on the View of component 'Reddit'
browser_adapter.ts:78EXCEPTION: Error: Uncaught (in promise): Unexpected directive value 'undefined' on the View of component 'Reddit'BrowserDomAdapter.logError @ browser_adapter.ts:78BrowserDomAdapter.logGroup @ browser_adapter.ts:89ExceptionHandler.call @ exception_handler.ts:53(anonymous function) @ application_ref.ts:304schedulerFn @ async.ts:131SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:117onError @ ng_zone.ts:138onHandleError @ ng_zone_impl.ts:90ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
browser_adapter.ts:78STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:78ExceptionHandler.call @ exception_handler.ts:56(anonymous function) @ application_ref.ts:304schedulerFn @ async.ts:131SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:117onError @ ng_zone.ts:138onHandleError @ ng_zone_impl.ts:90ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
browser_adapter.ts:78Error: Uncaught (in promise): Unexpected directive value 'undefined' on the View of component 'Reddit'
    at resolvePromise (zone.js:538)
    at PromiseCompleter.reject (zone.js:515)
    at eval (application_ref.ts:340)
    at ZoneDelegate.invoke (zone.js:323)
    at Object.onInvoke (ng_zone_impl.ts:67)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (ng_zone_impl.ts:56)BrowserDomAdapter.logError @

我的app.js代码如下：

import { bootstrap } from "@angular/platform-browser-dynamic";
import { Component } from "@angular/core";

@Component({
    selector: 'reddit',
    directives: [ArticleComponent],
    template:`
 <form class="ui large form segment">
 <h3 class="ui header">Add a Link</h3>

 <div class="field">
 <label for="title">Title:</label>
 <input name="title" #newTitle>
 </div>
 <div class="field">
 <label for="link">Link:</label>
 <input name="link" #newLink>
 </div>
 <button (click)="addArticle(newTitle,newLink)" class="ui positive right floated button">Submit Link</button>
 </form>

<div class="ui grid posts">
<reddit-article>
</reddit-article>
</div>
    `
})
class Reddit {

    constructor() {

    }

    addArticle(title:HTMLInputElement, link:HTMLInputElement):void {
        console.log(`title: ${title.value} & link : ${link.value}`);
    }

}

@Component({
    selector: 'reddit-article',
    host: {
        class: 'row'
    },
    template: `
<div class="four wide column center aligned votes"<div class="ui statistic">
<div class="value">
{{ votes }}
</div>
<div class="label">
Points
</div>
</div>
</div>
<div class="twelve wide column">
<a class="ui large header" href="{{ link }}">
{{ title }}
</a>
<ul class="ui big horizontal list voters">
<li class="item">
<a href (click)="voteUp()">
<i class="arrow up icon"></i>
upvote
</a>
</li>
<li class="item">
<a href (click)="voteDown()">
<i class="arrow down icon"></i>
downvote
</a>
</li>
</ul>
</div>
`
})
class ArticleComponent{
    votes:number;
    title:string;
    link:string;

    constructor(){
        this.title='Angular 2';
        this.link='www.angular.io';
        this.votes=10;
    }

    voteUp(){
        this.votes=this.votes+1;
    }

    voteDown(){
        this.votes=this.votes-1;
    }
}
bootstrap(Reddit);

为什么我收到此错误＆amp;如何解决它。我花了2个小时尝试解决它，但不能。

Answer 1

第一个div是否缺少结束括号？

<div class="four wide column center aligned votes"<div class="ui statistic">
<div class="value">
{{ votes }}
</div>

Answer 2

首先应导入ArticleComponent，然后才能使用它：

import { bootstrap } from "@angular/platform-browser-dynamic";
import { Component } from "@angular/core";
import { ArticleComponent} from "wherever it is located";

@Component({
    selector: 'reddit',
    directives: [ArticleComponent],
    template:`

意外的指令值＆＃39; undefined＆＃39;在组件视图上

2 个答案: