Question

我正在尝试一些非常简单的方法，但是却不断出现错误：

代码如下：

app.component.html

<div class="col-md-{{myvalue}}">stuff here</div>

app.component.ts

myvalue: string;


ngOnInit() {
    this.myvalue('6');
}

由于某种原因，它给了我这个错误：

无法调用类型缺少调用签名的表达式。类型“字符串”没有兼容的呼叫签名。

我在这里做错了什么？

Answer 1

您必须按以下方式为字符串分配值：

myvalue: string;


ngOnInit() {
    this.myvalue = 6;
}

Answer 2

尝试一下，

app.component.html

<div [ngClass]="myvalue">...</div>

app.component.ts

myvalue: string;
ngOnInit() {
    this.myvalue = 'col-md-'+'6'; //concatenate your value as string here
}

如果您想使用function传递数据，则可以使用这种方法来实现，

myvalue: string;
ngOnInit() {
  this.setValue('6');
}

setValue(val: string){
    this.myvalue = 'col-md-'+val; //concatenate your value as string here
}

我还建议您阅读本文档https://angular.io/api/common/NgClass

Answer 3

我不推荐@ shadowman_93的解决方案。我们有属性绑定是有原因的。没有理由为此更改组件中的CSS装饰器。将'col-md'保留在模板中更有意义，这样，如果您需要更改它，您将在一个直观的位置找到它，而不是在组件的字符串文字中找到它。那只是糟糕的设计。

字符串不是函数。您正在设置字符串，就好像您正在为其调用set函数一样。 Typescript中的字符串几乎与其他所有语言中的字符串一样工作，所以

ngOnInit() {
    this.myvalue = '6';
}

将值传递给组件html的Angular 7问题

3 个答案: