Question

我不能让组件属性的插值工作。如果我输入{{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>

Answer 1

相反

export class NutriFromComponent { 

    title: string;

    constructor() {
        this.title = 'Tour of Heroes';
    }
}

申请

export class NutriFromComponent { 

    title = 'Tour of Heroes';

}

应该有效

Angular2插值无法工作

1 个答案: