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

Question

I am trying something very simple but I keep getting an error:

Here is the code:

app.component.html

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

app.component.ts

myvalue: string;


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

For some reason it's giving me this error:

Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures.

What I'm I doing wrong here?

Answer 1

you have to assign value to string as this:

myvalue: string;


ngOnInit() {
    this.myvalue = 6;
}

Answer 2

Try this,

app.component.html

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

app.component.ts

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

If you want to pass data using with function , you can achieve it by using this approach,

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

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

I also recommend you to read this documentation, https://angular.io/api/common/NgClass

Answer 3

I wouldn't recommend @shadowman_93's solution. We have property binding for a reason. There's no reason to change CSS decorators in your component for this. It makes more sense to keep 'col-md' in your template, that way if you ever need to change it you will find it in an intuitive place, not in a string literal in your component. Thats just bad design.

Strings are not functions. You are setting your string as if you are calling a set function for it. Strings in Typescript work like strings in pretty much every other language, so

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