Angular 如何将值设置为HTML属性？

如何将函数的值设置为HTML属性

e、 g.将属性值设置为foo的值

foo () : string
{  return "bar";
}

我试过了，但没有成功

<input type="button" value="{{foo ()}}"/>

<input type="button" [value]="foo ()"/>

<input type="button" value="foo ()"/>

工作正常：
@组成部分({
选择器：“我的应用程序”，
模板：`
你好，{{name}}
单击{{counter}}
`,
})
类HomeComponent{
计数器=0；
名称='2'
增量（）{
返回“bar”；
}
}

您需要将foo设置为函数作为需求吗？为什么不能将其设置为变量？

Works Fine:
    @Component({
    selector: 'my-app',
    template: `
    <h1>Hello, {{ name }}</h1>
    <button (click)="increment()">Click {{ counter }}</button>
    <input type="button" value="{{ increment()}}"/>
    
  `,
    })
    class HomeComponent {
    counter = 0;
    name = 'Angular 2'
    
    increment() {
        return "bar";
    }
    }