Question

我已经关注了angular2的教程，我创建了一个名为'playlist'的组件，当我运行我的网站时，我在开发控制台中收到以下错误：

EXCEPTION：选择器“播放列表”与任何元素都不匹配 angular2.dev.js：23887 EXCEPTION：错误：未捕获（在承诺中）：选择器“播放列表”与任何元素都不匹配 angular2-polyfills.js：469未处理的承诺拒绝：选择器“播放列表”与任何元素都不匹配;区域：角;任务：Promise.then;值：BaseException {message：“选择器”播放列表“与任何元素都不匹配”，堆栈：“错误：选择器”播放列表“与任何符号都不匹配... es / angular2 / bundles / angular2-polyfills.js：227：44 ）}} consoleError @ angular2-polyfills.js：469drainMicroTaskQueue @ angular2-polyfills.js：498ZoneTask.invoke @ angular2-polyfills.js：434 angular2-polyfills.js：471错误：未捕获（在承诺中）：选择器“播放列表”与任何元素都不匹配（...）consoleError @ angular2-polyfills.js：471drainMicroTaskQueue @ angular2-polyfills.js：498ZoneTask.invoke @ angular2- polyfills.js：434 angular2-polyfills.js：469未处理的承诺拒绝：选择器“播放列表”与任何元素都不匹配;区域：;任务：Promise.then;值：BaseException {message：“选择器”播放列表“与任何元素都不匹配”，堆栈：“错误：选择器”播放列表“与任何符号都不匹配... es / angular2 / bundles / angular2-polyfills.js：227：44 ）}} consoleError @ angular2-polyfills.js：469drainMicroTaskQueue @ angular2-polyfills.js：498ZoneTask.invoke @ angular2-polyfills.js：434 angular2-polyfills.js：471错误：未捕获（在承诺中）：选择器“播放列表”与任何元素都不匹配（...）

我的代码：

app组件：

import {Component} from 'angular2/core';
import {Settings} from './config';
import {Video} from './video';
import {PlaylistComponent} from './playlist.component';

@Component({
    selector: 'app',
    templateUrl: 'app/ts/app.component.html',
    directives: [PlaylistComponent]
})

export class AppComponent {
    title = Settings.MAIN_HEADING;
    videos: Array<Video>;

    constructor() {
        this.videos = [
            new Video(0, 'Video No1', 'f8qBeaGe2S4', 'First video ever!'),
            new Video(1, 'Video No2', 'bKWDKmHvF78', 'Second video :D')
        ]
    }

}

app html：

<h1>{{ title }}</h1>
<playlist [videos]="videos"></playlist>

播放列表组件：

import {Component} from 'angular2/core';

@Component({
    selector: 'playlist',
    templateUrl: 'app/ts/playlist.component.html',
    inputs: ['videos']
})

export class PlaylistComponent {}

播放列表html：

<table class="table table-hover">
    <thead>
        <tr>
            <td>ID</td>
            <td>Title</td>
            <td>Description</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="#v of vidoes">
            <td>{{ v.id }}</td>
            <td>{{ v.title }}</td>
            <td>{{ v.desc }}</td>
        </tr>
    </tbody>
</table>

Angular2'选择器“播放列表”与任何元素'

0 个答案: