Angular报错TS2339:类型'CampaignComponent'不存在属性'onSubmit'如何解决？

你遇到的TS2339: Property 'onSubmit' does not exist on type 'CampaignComponent'报错，是因为你在campaign.component.html的表单标签上绑定了(ngSubmit)="onSubmit(userPost.value)"提交事件，但对应的CampaignComponent类中没有定义同名的onSubmit方法，TypeScript编译阶段的类型校验检测到缺失对应属性就抛出了该错误。

你只需要在campaign.component.ts的CampaignComponent类中添加onSubmit方法即可，修改后的完整ts代码如下：

import { Component, OnInit } from '@angular/core';
import { GetServiceService } from '../get-service.service';

@Component({
  selector: 'app-campaign',
  templateUrl: './campaign.component.html',
  styleUrls: ['./campaign.component.css'],
})
export class CampaignComponent implements OnInit {
  campaigns;
  constructor(private campaignService: GetServiceService) {}

  ngOnInit(): void {
    this.campaigns = this.campaignService.getCampaign();
  }

  // 新增onSubmit方法处理表单提交逻辑
  onSubmit(formValue: {name: string}) {
    // 此处编写提交表单数据的业务逻辑，比如调用服务接口发送数据到后端API
    console.log('表单提交的内容：', formValue);
    // 若你的服务中已经封装了提交Campaign的接口，可以按下方示例调用
    // this.campaignService.addCampaign(formValue).subscribe(result => {
    //   console.log('提交成功', result);
    //   // 可以在这里补充重置表单、刷新Campaign列表的逻辑
    // })
  }
}

添加完成后重新执行ng serve启动项目即可正常运行，表单提交时会触发该方法执行你定义的提交逻辑。

内容的提问来源于stack exchange，提问作者Dragonarc