我在Angular中创建了一个下拉菜单，其中的值从1到20不等.如果我选择number >10，它将显示一条msg

Question

html: -

<div class="form-group">
<label for="experience" class="form-label">I am experience</label>
<select  class="custom-select" formControlName="experience" name="experience" onchange="change(this);">
<option *ngFor="let experience of experiences">{{experience}}</option>
</select>

</div>

ts: -

experiencesLessThanTenYears = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
experiencesMoreThanTenYears = ['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'];
experiences = [ ...this.experiencesLessThanTenYears, ...this.experiencesMoreThanTenYears];

ngOnInit(): void {
this.registrationForm = this.fb.group({
firstName: ['', [Validators.required, Validators.minLength(3)]],
lastName: ['', [Validators.required, Validators.minLength(3)]],
startDate: [ '',[Validators.required]],
endDate: ['',[Validators.required]],
experience: ['',[Validators.required,]],
})

我想在我的视图上显示选择小于10和大于10的值的消息。请告诉我怎么做。

我尝试使用我的html选择的改变事件，但它不工作。我希望做一个自定义验证器，但我不知道只是一个想法。谁来帮帮我吧

Answer 1

{{+registrationForm.get('experience').value>10?
'You have a great experience':
'You have a poor experience'}}.

但这使得如果你没有选择任何东西，就会显示你的体验很差。

我们可以这样使用ng-container *ngIf

<ng-container *ngIf="registrationForm.get('experience').value">
{{+registrationForm.get('experience').value>10?
'You have a great experience':
'You have a poor experience'}}.
</ng-container>

当我们使用*ngIf时，我们可以创建一个临时变量

<ng-container *ngIf="registrationForm.get('experience').value as experience">
{{+experience>10?
'You have a great experience':
'You have a poor experience'}}.
</ng-container>

另一种方法是在三元操作符中使用三元操作符。真的是一个丑陋的(但同样有效的)解决方案

{{registrationForm.get('experience').value?
+registrationForm.get('experience').value>10?
'You have a great experience':
'You have a poor experience':
''}}