Question

我使用以下库：

https://github.com/izupet/angular2-counto

我传递动态值时收到错误。

所以在我的组件app.component.html中：

如果我使用插值：

<div counto [step]="30" [countTo]="'{{value}}'" [countFrom]="0 [duration]="4" (countoChange)="counto = $event" (countoEnd)="onCountoEnd()">{{counto | currency:'EUR':true:'1.2-2'}}</div>

我收到与双括号语法相关的错误：

[countTo]="'{{value}}'"

否则，没有它们就可以了：

 [countTo]="10"

这里为[countTo]属性传递组件中的值。

对于app.component.ts

export class AppComponent {

  value=10;

}

Answer 1

正确的sintax是：

<强> [countTo] = “值”

没有 {{}} 且没有单引号

这是因为，来自库的countTo输入扩展了一个数字。

Answer 2

在角度中，[]的用法是当值是绑定表达式（您的情况）时。

因此，例如，输入：

<input value="data"> // value is `data`, a string
<input [value]="data"> // value is a property of the current component's class called `data`, can be an object, array, number, string, etc.

这就是为什么您只需要使用属性的名称，以便将其作为[]所包围的标记属性的值传递。

因此，如果您正在使用的库定义并接受类中的[countTo]="value"属性，则使用value将会正常工作。

Answer 3

尝试从绑定中删除引号，如下所示：

[countTo]="{{value}}"

或绑定到更改函数，如下所示：

(countoChange)="handleCountChange($event)"

然后在组件代码中：

handleCountChange(data) { return this.value; // or whatever you like }

如何在angular2-counto中传递动态值

3 个答案: