Javascript 值作为字符串分配给对象，即使它是强类型

我在代码中看到了一些奇怪的东西。在下面的这个例子中，我有一个

（change）

事件，它获取用户在下拉菜单中选择的当前值

  <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>

然后调用CourseContentService中的方法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 }));
  }

  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;
  }

---

我想你可以简单地用ngValue而不是value来解决这个问题

<select
[(ngModel)]="courseContentButtonSelectedEvent"
class="course-content-sidebar-form-control"
(ngModelChange)="setCourseContentButtonEventStep($event)"
>
    <option
      *ngFor="let courseContentButtonEvent of courseContentButtonEventList"
      [ngValue]="courseContentButtonEvent"
      [selected]="courseContentButtonEvent.id == courseContentButtonSelectedEvent"
      >{{ courseContentButtonEvent.value }}</option
    >
</select>

然后我们的活动可以被大规模清理

---

我还要注意一件事。事件处理程序中的类型是“CourseContentButtonEventType”。这是预期的吗？这就是您列表中的项目吗？

谢谢，这已经解决了问题！是的，这是预期的，这就是类型。

<select
[(ngModel)]="courseContentButtonSelectedEvent"
class="course-content-sidebar-form-control"
(ngModelChange)="setCourseContentButtonEventStep($event)"
>
    <option
      *ngFor="let courseContentButtonEvent of courseContentButtonEventList"
      [ngValue]="courseContentButtonEvent"
      [selected]="courseContentButtonEvent.id == courseContentButtonSelectedEvent"
      >{{ courseContentButtonEvent.value }}</option
    >
</select>

setCourseContentButtonEventStep(courseContentButtonEventType: CourseContentButtonEventType): void {
    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 }));
}