Я разработчик React, начинаю работать с одним из моих первых Angular проектов. Я пытаюсь вычислить значение, которое будет присвоено свойству в моей разметке, на основе значения, переданного из родительского компонента. Я использую тернарный оператор для определения значения, которое нужно присвоить, но это вызывает ошибку компилятора. Пожалуйста, посмотрите мой код ниже:
Родительский компонент, вызывающий мой пользовательский компонент:
<gcp-three-dot-progress-bar [step]="2"></gcp-three-dot-progress-bar>
Component .ts file
import {
Component,
OnInit,
Input,
} from "@angular/core";
@Component({
selector: "gcp-three-dot-progress-bar",
templateUrl: "./three-dot-progress-bar.html",
styleUrls: ["./three-dot-progress-bar.scss"],
})
export class ThreeDotProgressBar implements OnInit {
@Input("step") step: number;
ngOnInit() {
}
}
Component. HTML file
<mat-progress-bar mode="determinate" value="{{step => 2 ? 100 : 50 }}" class="vertical-progress-bar"></mat-progress-bar>
<p>{{step}}</p>
Ошибка, которую я получаю, выглядит следующим образом:
Неперехваченная ошибка: ошибки синтаксического анализа шаблона: Ошибка синтаксического анализатора: привязки не могут содержать назначения в столбце 7 в [{{step => 2? 100: 50}}] в ...
Как я уверен, вы можете сказать, я хочу использовать переменную 'step' для определения значения свойства 'value', но я подозреваю Я делаю что-то в корне неправильно. Если я закомментирую первую строку в моем настраиваемом компоненте, я вижу, что правильное значение проходит в 'step' в 'p' во второй строке, поэтому я считаю, что получаю правильное значение.
Я пробовал поискать похожую реализацию, но я думаю, что, возможно, у меня еще нет четких терминов Angular, поскольку я не могу найти ничего похожего (хотя я убежден, что должны быть некоторые там).
Я был бы очень благодарен, если бы кто-нибудь был так добр, чтобы указать мне в правильном направлении либо ссылкой или советом, что искать, либо указав на мою ошибку.