Angular中如何对比用户输入与服务返回的禁用课程数组以校验有效性

嘿，我来帮你搞定这个课程重复检查的需求～其实核心就是先把禁用课程的数组存到组件里，然后在用户提交输入时做对比校验，具体步骤如下：

首先，你需要在组件里定义一个变量来存放禁用课程的数组，然后在initCourses的订阅回调里把服务返回的not applicable courses赋值给它。注意要根据你的TopicDto实际字段名调整（比如如果字段是notApplicableCourses就用这个）：

// 组件内定义变量
disabledCourses: Array<Course | string> = []; // 这里根据实际类型，是课程对象还是字符串ID/名称
isLoading = true; // 用来处理异步加载中的状态

private initCourses() { 
  this.isLoading = true;
  this.courseAccessService.gettopicById(this.courseId).subscribe( 
    (topicDto: TopicDto) => { 
      this.course = topicDto;
      // 把禁用课程数组赋值到组件变量
      this.disabledCourses = topicDto.notApplicableCourses; 
      this.isLoading = false;
    }, 
    err => { 
      this.displayError = true; 
      this.isLoading = false;
    } 
  ); 
}

接下来写一个专门的函数，用来检查用户输入的课程是否在禁用数组里。这里分两种情况：

• 如果禁用数组存的是课程ID/名称字符串，直接用includes方法
• 如果存的是课程对象，就用some方法对比唯一标识（比如课程ID）

// 假设用户输入的是课程ID字符串，或者课程对象
checkIfCourseDisabled(userInput: string | Course): boolean {
  // 先统一提取要对比的标识
  const targetIdentifier = typeof userInput === 'string' 
    ? userInput 
    : userInput.id; // 如果是对象，取ID，也可以换成name等唯一字段

  // 根据数组类型选择对比方式
  if (typeof this.disabledCourses[0] === 'string') {
    return this.disabledCourses.includes(targetIdentifier);
  } else {
    // 数组里是课程对象，对比ID
    return this.disabledCourses.some(disabledCourse => disabledCourse.id === targetIdentifier);
  }
}

最后，在用户点击“添加课程”的事件处理函数里调用上面的校验函数，如果是禁用课程就弹出提示，阻止后续添加逻辑：

onAddCourse(userInput: any) {
  // 先判断是否还在加载禁用数组，避免空数组误判
  if (this.isLoading) {
    this.snackBar.open('数据加载中，请稍后再试！', '关闭', { duration: 2000 });
    return;
  }

  const isDisabled = this.checkIfCourseDisabled(userInput);
  if (isDisabled) {
    // 这里用你项目里的提示组件，比如Angular的MatSnackBar，或者原生alert
    this.snackBar.open('该课程已被禁用，无法添加！', '关闭', { duration: 3000 });
    return; // 阻止后续添加操作
  }

  // 这里写正常添加课程的逻辑
  // ...
}

为了避免用户在禁用数组加载完成前误操作，你可以在模板里把添加按钮设置为禁用状态，直到加载完成：

<!-- 假设这是单个添加视图的按钮 -->
<button 
  (click)="onAddCourse(userInput)" 
  [disabled]="isLoading"
>
  {{ isLoading ? '加载中...' : '添加课程' }}
</button>

这样整个流程就完整啦，你只需要根据自己项目里的TopicDto结构、课程对象的字段名，还有提示组件的实际用法做微调就行～

内容的提问来源于stack exchange，提问作者user-6589801