Angular7-表单未提交到数据库

Question

我使用Laravel 5.8作为后端，使用Angular7作为前端。当我单击“删除提交”按钮时，没有任何反应

我检查了控制台，出现此错误：

  

SmsShortcodeMyComponent.html：85错误TypeError：_co.deleteShortcode不是函数

     

SmsShortcodeMyComponent.html：84错误TypeError：_co.updateShortcode不是函数

Laravel：ShortcodeController

    public function destroy(Shortcode $shortcode)
    {
        $shortcode->delete();

        return response()->json([
            'message' => 'Successfully deleted Short Code!'
        ]);
    }

    public function update(Request $request, Shortcode $shortcode)
    {
        $request->validate([
           'name'       => 'nullable'
        ]);

        $shortcode->update($request->all());

        return response()->json([
            'message' => 'Great success! Shortcode updated',
            'shortcode' => $shortcode
        ]);
    }

api.php

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});


Route::get('/shortcodes', 'ShortcodeController@index')->name('shortcodes.index');

Route::post('/shortcodes', 'ShortcodeController@store')->name('shortcodes.store');

Route::get('/shortcodes/{shortcode}', 'ShortcodeController@show')->name('shortcodes.show');

Route::put('/shortcodes/{shortcode}', 'ShortcodeController@update')->name('shortcodes.update');

Route::delete('/shortcodes/{shortcode}', 'ShortcodeController@destroy')->name('shortcodes.destroy');

Angular7：shortcode.service.ts

  updateShortcode (id, shortcode): Observable<any> {
    const url = `${apiUrl}/${id}`;
    return this.http.put(url, shortcode, httpOptions).pipe(
      tap(_ => console.log(`updated shortcode id=${id}`)),
      catchError(this.handleError<any>('updateShortcode'))
    );
  }

  deleteShortcode (id): Observable<Shortcode> {
    const url = `${apiUrl}/${id}`;

    return this.http.delete<Shortcode>(url, httpOptions).pipe(
      tap(_ => console.log(`deleted shortcode id=${id}`)),
      catchError(this.handleError<Shortcode>('deleteShortcode'))
    );
  }

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

sms-shortcode-my.component.html

              <div class="box-body">
                <table id="example2" class="table table-bordered table-hover table-striped table-condesed">
                  <thead>
                  <tr>
                    <th class="hidden">Id</th>
                    <th width="70%">Shortcode</th>
                    <th>Actions</th>                   
                  </tr>
                  </thead>
                  <tbody>
                  <tr  *ngFor="let datas of data">
                      <td>{{datas.name}}</td>
                    <td>
                        <button class="btn btn-info" (click)="updateShortcode(shortcode)">Edit</button>
                        <button class="btn btn-danger" (click)="deleteShortcode(shortcode)" style="margin-left: 20px;"> Delete</button>
                    </td>                                  
                  </tr>
                </table>
              </div>

打字稿

import { Component, OnInit } from '@angular/core';
import { ShortcodeService } from '../../../services/shortcode.service';
import { Shortcode } from '../../../models/shortcode';

@Component({
  selector: 'app-sms-shortcode-my',
  templateUrl: './sms-shortcode-my.component.html',
  styleUrls: ['./sms-shortcode-my.component.scss']
})
export class SmsShortcodeMyComponent implements OnInit {
  displayedColumns: string[] = ['name'];
  data: Shortcode[] = [];
  isLoadingResults = true;  

  constructor(private api: ShortcodeService) { }
  ngOnInit() {

    this.api.getShortcodes()
      .subscribe(res => {
        this.data = res;
        console.log(this.data);
        this.isLoadingResults = false;
      }, err => {
        console.log(err);
        this.isLoadingResults = false;
      });
  }

  ngOnDestroy(): void {
    document.body.className = '';
  }

}

当我单击删除按钮时，我希望该行将从数据库中删除，但是什么也没发生。

谢谢