代码之家 › 专栏 › 技术社区 › methuselah

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

typescript angular javascript

methuselah · 技术社区 · 3 年前

我在代码里看到了一些奇怪的东西。在下面这个例子中,我有一个 (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>

它调用方法 .

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

设置CourseContentButtonEventStep 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;
  }

奇怪的是,尽管我 courseContentButtonEventType ,它将作为字符串而不是数字添加到我的对象中。例如,请参见下面的数据对象 button -> event -> action "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"
    }
  }
]

1 回复 | 直到 3 年前

MindingData 3 年前

我认为你可以通过使用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>

注意使用ngValue而不是value。Value总是一个字符串,而ngValue可以保存一个对象(这基本上就是您想要的)。

还要注意使用(change)和(ngModelChange)的区别

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

这样我们的活动就可以得到大规模的清理。

我还要注意一件事。事件处理程序中的类型是“CourseContentButtonEventType”。这是预期的吗?那是你单子上的项目吗?