Angular-如何从Laravel端点执行保存和更新

Question

我正在研究Angular7 CRUD项目，该项目从Laravel获得其端点。我需要有关如何编写将保存到数据库中的component.ts和component.html的帮助。

我已经编写了端点，模型和服务。

模型：shortcode.php

class Shortcode extends Model
{
    protected $table = 'short_code';

    protected $fillable = [
        'name', 
        'descriptions',
        'telco_id',
        'created_at', 
        'updated_at', 
        'deleted_at', 
        'help_message', 
        'stop_message',
        'user_id'
        ];

    public function telco() {
        return $this->belongsTo('App\Telco');
    }  

    public function user() {
        return $this->belongsTo('App\User');
    }    

资源

    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'descriptions' => $this->descriptions,
            'help_message' => $this->help_message,
            'stop_message' => $this->stop_message,
            'user' => $this->user,
            'telco' => $this->telco,
            // Casting objects to string, to avoid receive create_at and update_at as object
            'deleted_at' => (string) $this->deleted_at,          
            'created_at' => (string) $this->created_at,
            'updated_at' => (string) $this->updated_at
          ];
    }

用于存储的ApiController：

    public function storeShortcode(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'name' => 'required'
        ]);
        if ($validator->fails()) {
            return response()->json($validator->errors(), 422);
        }

        // Creating a record in a different way
        $createShortcode = Shortcode::create([
            'user_id' => $request->user()->id,
            'name' => $request->name,
            'description' => $request->description,
        ]);

        return new ShortcodeResource($createShortcode);        
    }

角度

型号：shortcode.ts

import { User } from '../models/user';
import { Telco } from '../models/telco';

export class Shortcode {
    id: number;
    name: string;
    description: string;
    telco_id: number;
    help_message: string;
    stop_message: string;
    user_id: number;

    user?: User;
    telco?: Telco;   

    constructor() {}
  }

shortcode.service.ts

// App import
import { Shortcode } from '../models/shortcode';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from 'src/environments/environment.prod';
import { HttpErrorHandler, HandleError } from '../shared/_services/http-handle-error.service';

@Injectable({
  providedIn: 'root'
})

export class ShortcodeService {

  private readonly apiUrl = environment.apiUrl;
  private shortcodeUrl = this.apiUrl;
  private handleError: HandleError;  

  constructor(
    private http: HttpClient,
    httpErrorHandler: HttpErrorHandler ) {
      this.handleError = httpErrorHandler.createHandleError('ShortcodeService');
    }


/** POST shortcode to shortcodes endpoint */
addShortcode (shortcode: Shortcode): Observable<Shortcode> {
  return this.http.post<Shortcode>(this.shortcodeUrl, shortcode)
    .pipe(
      catchError(this.handleError('addShortcode' + '/storeShortcode', shortcode))
    );
}

}

基于我编写的其他代码，我想创建component.ts和component.html并通过端点保存到数据库中。但是不知道该怎么办。