Angular 4 模板绑定答案

【问题标题】：Angular 4 template bindingAngular 4 模板绑定
【发布时间】：2018-05-26 14:32:37
【问题描述】：

应用组件

   @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
    export class AppComponent implements OnInit {
        application: Application = new Application();
        pageTitle: string;
        constructor() {

            this.pageTitle = "{{application.businessName}} has been Approved";
            this.application.businessName = 'Test';
        }

    }

AppComponent Html

<h1>{{pageTitle}}</h1>

我需要的结果

测试已获批准

【问题讨论】：

Application 是什么类？在您将 Test 分配给它之前，businessName 是什么？
对于这个示例应用程序类有一个名为 businessname 的属性
您没有发布足够的信息，例如：您的组件装饰器详细信息在哪里？你得到的实际结果是什么？请编辑您的问题
更新了问题
您的查询是什么？

标签： angular angular2-template angular2-forms

【解决方案1】：

我假设您希望标题标签 <h1> 在 Application 属性更改时更新。花括号用于模板，这意味着它们适用于您的 html 页面，而不是在 Component 内。

您可以做的是在模板中构建标题。

选项 1

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    application: Application = new Application();

    constructor() {
        this.application.businessName = 'Test';
    }
}

app.component.html

<h1>{{application.businessName}} has been approved</h1>

选项 2

或者你可以将标题的片段存储在Component中

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    application: Application = new Application();
    pageTitleSuffix: string = "has been approved";
    constructor() {
        this.application.businessName = 'Test';
    }
}

app.component.html

<h1>{{application.businessName}} {{pageTitleSuffix}}</h1>

【讨论】：