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

【问题标题】：Angular 7 issue with passing value to components html将值传递给组件html的Angular 7问题
【发布时间】：2019-07-30 10:25:57
【问题描述】：

我正在尝试一些非常简单的方法，但我不断收到错误：

代码如下：

app.component.html

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

app.component.ts

myvalue: string;


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

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

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

我在这里做错了什么？

【问题讨论】：

不能调用字符串，它不是函数。 this.myvalue = '6';
你也应该使用[ngClass]='"
Angular 不是淘汰赛！ :D
你定义了 myvalue 一个函数吗？显然不要尝试分配值而不是作为参数传递。您可以为此使用 ng-class

标签： angular typescript angular7

【解决方案1】：

你必须像这样为字符串赋值：

myvalue: string;


ngOnInit() {
    this.myvalue = 6;
}

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

我认为关键是，他试图理解 [ngClass] 属性和函数调用的工作原理。有时您需要自己探索应用程序的优缺点或需求。所以我在这里不是专业顾问，只是想向任何人展示做某事的方式。方法/方式可以增加。