Угловая проблема 7 с передачей значения компонентам HTML

Question

Я пытаюсь сделать что-то очень простое, но постоянно получаю сообщение об ошибке:

Вот код:

app.component.html

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

app.component.ts

myvalue: string;


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

По какой-то причине он выдает мне эту ошибку:

Невозможно вызвать выражение, тип которого не имеет подписи вызова.Тип 'String' не имеет совместимых подписей вызовов.

Что я здесь не так делаю?

Answer 1

Вы должны присвоить значение строке следующим образом:

myvalue: string;


ngOnInit() {
    this.myvalue = 6;
}

Answer 2

Я бы не рекомендовал решение @ shadowman_93. У нас есть обязательная собственность по причине. Для этого нет причин менять CSS-декораторы в вашем компоненте. Имеет больше смысла сохранять 'col-md' в вашем шаблоне, поэтому, если вам когда-нибудь понадобится изменить его, вы найдете его в интуитивно понятном месте, а не в строковом литерале в вашем компоненте. Это просто плохой дизайн.

Строки не являются функциями. Вы устанавливаете свою строку так, как будто вы вызываете функцию set для нее. Строки в Typescript работают подобно строкам практически на любом другом языке, поэтому

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

Answer 3

Попробуйте это,

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