Angular2插值不起作用

我无法获取组件属性的插值。 如果我input{{1+1}}那么将不会，否则。 我试图简单地显示{{title}}，并在两个地方（app和NutriForm组件）中声明它，但没有任何效果。

这些是相关的文件。

app.component.ts 

 import { Component } from '@angular/core'; import {NutriFromComponent} from './NutriForm.component' @Component({ selector: 'my-app', directives: [NutriFromComponent], template: '<NutriForm></NutriForm>' }) export class AppComponent { title = "hello"; }

plain.html 

 <html> <head> <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../public/stylesheets/style.css" rel="stylesheet" /> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <!-- 2. Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>

NutriForm.component.ts 

 import {Component} from '@angular/core'; import {Control , FormBuilder , Validators , NgForm} from '@angular/common'; import {ControlGroup} from '@angular/common'; import {NutriModel} from '../Models/NutriModel.ts'; @Component({ selector: 'NutriForm', templateUrl: 'views/NutriForm.component.html' }) export class NutriFromComponent { title: string; constructor() { this.title = 'Tour of Heroes'; } }

NutriForm.component.html 

 <h2> {{title}}</h2> <table> <tr> <td></td> <td>Your Value</td> <td>Recommended</td> <td>Average</td> </tr> <tr> <!--<td><input type="text" required [(ngModel)]="model.sex" ngControl="sex" /></td>--> <td>Your Value</td> <td>Recommended</td> <td>Average</td> </tr> </table> <button type="submit" class="btn btn-default">Submit</button>

代替 

 export class NutriFromComponent { title: string; constructor() { this.title = 'Tour of Heroes'; } }

应用 

 export class NutriFromComponent { title = 'Tour of Heroes'; }

它应该工作

Interesting Posts