Objective: Trigger the IF block when a user selects a value from the dropdown menu
Challenge: Despite the debugger indicating that the value is true, the conditional block is not being executed. Could this issue be related to any changes in the HTML code? There were some minor adjustments made to the nesting structure for better page layout, but everything else remains unchanged.
Attempted Solutions:
Examining the HTML structure
Utilizing Chrome's debugger tool
Commenting out all lines except for a console.log statement
HTML Code:
<form [formGroup]="_siteForm">
<div class="title-container">
<mat-card-title class="text-center" i18n="@@MoVeSeLo_H1_1">
Please Sign In
</mat-card-title>
<mat-form-field class="language-field">
<mat-select (selectionChange)="doSomething($event)" [value]="languages[i]">
<mat-option *ngFor="let language of languages" [value]="language">
{{language.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>
TypeScript Code:
//Array for dropdown
public languages = [
{ value: "en", viewValue: 'English' },
{ value: "es", viewValue: 'Spanish' }
];
//Sets default value for dropdown
if (this.localeId == "en" || this.localeId == "en-US") { this.i = 0; }
else { this.i = 1; }
//Event handler when a user selects an option from the dropdown
doSomething(event) {
console.log("in doSomething()");
//if value selected is Spanish
if (event.value == "es") {
console.log("event.value == ES");
}
else if (event.value == "en") { console.log("event.value == EN"); }
}
Debugger Output (Focus on the event object):
value: "es"
viewValue: "Spanish"
If the value of event.value is "es," why is the IF block being bypassed and the console log statement not being displayed?