I'm encountering something unusual in my code. In the following example, there is a (change) event that captures the current value selected by the user from a dropdown menu.
<div style="padding-right: 0; width: 100%;">
<label style="width: 100%;">
<select
[(ngModel)]="courseContentButtonSelectedEvent"
class="course-content-sidebar-form-control"
(change)="setCourseContentButtonEventStep($event)"
>
<option
*ngFor="let courseContentButtonEvent of courseContentButtonEventList"
[value]="courseContentButtonEvent.id"
[selected]="courseContentButtonEvent.id == courseContentButtonSelectedEvent"
>{{ courseContentButtonEvent.value }}</option
>
</select>
</label>
</div>
The mentioned method is setCourseContentButtonEventStep.
setCourseContentButtonEventStep(event: Event): void {
const courseContentButtonEventType: CourseContentButtonEventType = ((event.target as HTMLInputElement)
.value as unknown) as CourseContentButtonEventType;
let courseContent = JSON.parse(JSON.stringify(this.courseContent));
this.courseContent = CourseContentService.setCourseContentButtonEventStep(
courseContent,
courseContentButtonEventType,
this.selectedCourseContentUid,
this.selectedCourseElementUid,
this.courseContentButtonEventIndex
);
this.store.dispatch(builderActions.setCourseContent({ courseContent: courseContent }));
}
This method then invokes the setCourseContentButtonEventStep function within the CourseContentService.
static setCourseContentButtonEventStep(
courseContent: ICourseContent[],
courseContentButtonEventType: CourseContentButtonEventType,
selectedCourseContentUid: string,
selectedCourseElementUid: string,
courseContentButtonEventIndex: number
): ICourseContent[] {
for (let i = 0; i < courseContent.length; i++) {
if (courseContent[i].uid === selectedCourseContentUid) {
for (let j = 0; j < courseContent[i].button.length; j++) {
if (courseContent[i].button[j].uid === selectedCourseElementUid) {
for (let k = 0; k < courseContent[i].button[j].event.length; k++) {
if (k == courseContentButtonEventIndex) {
courseContent[i].button[j].event[k].action = courseContentButtonEventType;
}
}
}
}
}
}
return courseContent;
}
Now interestingly, despite the casting of courseContentButtonEventType, it is being added to the object as a string instead of a number. For instance, inspect the data object below, under button -> event -> action, specifically
"action": "4"[
{
"id": 1,
"uid": "card-HJUI9b9Nre",
"body": {
"text": "Testing"
},
"type": 0,
"button": [
{
"uid": "button-4WhgDe8mhe",
"title": "Get Started",
"event": [
{
"id": 1,
"action": 5,
"value": "https://en.wikipedia.org/wiki/Educational_technology"
},
{
"id": 2,
"action": "4"
}
],
"isEnabled": true
}
],
"audio": {
"uid": "audio-NIiH1fCkqd",
"url": "https://s3.eu-west-2.amazonaws.com/media.example.co.uk/default/testing_startup_ideas.mp3"
}
}
]