Angular Material api table-add（post）不起作用

Question

我对有角度的人很熟悉（通常是编码），试图创建带有Crud选项的Web api数据表。感觉就像我碰到了墙，无法使其在请求后正常工作。 这是我的演示代码Github的链接。 提供的每一个帮助将不胜感激。预先谢谢你。

编辑：以澄清问题Imgur。

此问题的一些相关代码：

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.scss']
})
export class AddComponent implements OnInit{

  kategorii: any;
  podkategorii: any;
  courses: any;
  subCatEvent: any;
  localActive: boolean;

  constructor(public dialogRef: MatDialogRef<AddComponent>,
            @Inject(MAT_DIALOG_DATA) public data: Course,
            public courseService: CourseService) { }

  formControl = new FormControl('', [Validators.required])

  ngOnInit() {
    this.courseService.getCategory().subscribe(
      data => {
        console.log(data);
        this.kategorii = data;
      }
    )
    }
    selectedCat(event){
      console.log(event);

      this.courseService.getSubcategory(event).subscribe(
        data => {
          console.log(data);
          this.podkategorii = data;
        }
      )
    }

    selectedSub(event){
      console.log(event);
      this.subCatEvent = event;
    }

  getErrorMessage() {
    return this.formControl.hasError('required') ? 'Required field' :
      this.formControl.hasError('email') ? 'Not a valid email' : '';
  }

  submit() {}

  onNoClick(): void {
    this.dialogRef.close();
  }

  public confirmAdd(): void {
    this.courseService.addCourse(this.data);
  }

}

服务：

let httpHeaders = new HttpHeaders;
httpHeaders.append('Content-Type', 'application/json');

const httpOptions = {headers: httpHeaders}



@Injectable({
  providedIn: 'root'
})
export class CourseService {

  private baseUrl = 'http://ecourse.trustorbits.click';
  getUrl = 'http://ecourse.trustorbits.click/api/courses';
  postUrl = 'http://ecourse.trustorbits.click/api/save/courses';
  putUrl = '';
  deleteUrl = 'http://ecourse.trustorbits.click/api/delete/{courseID}';

  dataChange: BehaviorSubject<Course[]> = new BehaviorSubject<Course[]>([])
  dialogData: any;


  constructor(private http: HttpClient) {}


  get data(): Course[] {
    return this.dataChange.value;
  }

  getDialogData() {
    return this.dialogData;
  }

  handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message
    return throwError(
      'Something bad happened; please try again later.');
  };

  getAllCourses() {
    this.http.get<Course[]>(this.getUrl, httpOptions).subscribe(data => {  
        this.dataChange.next(data);
    },
    (error: HttpErrorResponse) => {
        console.log (error.name + ' ' + error.message);
    })
  }  

  addCourse(course: Course): void {
        this.http.post(this.postUrl, course, httpOptions).subscribe(data => { 
            this.dialogData = course;   
        })
  }

  editCourse(course: Course): void {
        this.http.put(this.baseUrl, course, httpOptions).subscribe(data => { 
            this.dialogData = course;
        })
  }

  deleteCourse(courseID: number): void {
        this.http.delete(this.deleteUrl, httpOptions).subscribe(data => { 
            console.log(data['']);
        })
  }

  getCategory() {
    return this.http
      .get<any>('http://ecourse.trustorbits.click/api/categories')
      .pipe(
        map( (cat) => {
        return cat;
      })
    )
  }

  getSubcategory(category: number){
    return this.http
   .get<any>('http://ecourse.trustorbits.click/api/subcategories/' + category )
   .pipe(
       map( (sub) => {
           console.log(sub);
           return sub;

       })
   )
  }

}