Angular - 錯誤 TS2345：“NgForm”類型的參數不可分配給“Ussdthirdpartyapp”類型的參數

Question

我使用 Angular 7 作為前端和 Laravel 5.8 作為后端設計了一個應用程序。 我在郵遞員中測試了每一個，它運行得很好。 我的 ussd-channel-create.component.ts 中出現此錯誤

src/app/components/ussd/ussd-channel-create/ussd-channel-create.component.ts(58,56) 中的錯誤：錯誤 TS2345：“NgForm”類型的參數不可分配給“Ussdthirdpartyapp”類型的參數. “NgForm”類型缺少“Ussdthirdpartyapp”類型中的以下屬性：id、description、ussd_string、user_id 和另外 2 個。

然后我在我的 ussd-channel-create-component.ts 中得到了這個

拉拉維爾：

模型類：UssdThirdpartyApp.php

    class UssdThirdpartyApp extends Model
{
protected $table = 'ussd_thirdparty_app';

protected $fillable = [
    'name' ,
    'description',
    'ussd_string',
    'call_back',
    'created_at',
    'updated_at',
    'deleted_at',
    'telco',
    'user_id'

];    

public function telco()
{
    return $this->belongsTo(Telco::class, 'telco', 'id');
}        

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

UssdThirdpartyAppResource.php

    class UssdThirdpartyAppResource extends JsonResource
{
public function toArray($request)
{
    return [
        'id' => $this->id,
        'name' => $this->name,
        'description' => $this->description,
        'ussd_string' => $this->ussd_string,
        'call_back' => $this->call_back,
        'telco' => $this->telco,            
        'user' => $this->user,
        'deleted_at' => (string) $this->deleted_at,          
        'created_at' => (string) $this->created_at,
        'updated_at' => (string) $this->updated_at
      ];
 }
}

接口控制器

    public function storeUssdthirdpartyApp(Request $request)
{
    $validator = Validator::make($request->all(), [
        'name' => 'required',
        'description' => 'required',
        'ussd_string' => 'required|string|ussd_string|max:255|unique:ussd_thirdparty_app',
        'call_back' => 'required',
        'telco' => 'required'
    ]);
    if ($validator->fails()) {
        return response()->json($validator->errors(), 422);
    }

    // Creating a record in a different way
    $createUssdthirdpartyapp = UssdThirdpartyApp::create([
        'user_id' => $request->user()->id,
        'name' => $request->name,
        'description' => $request->description,
        'ussd_string' => $request->ussd_string,
        'call_back' => $request->call_back,
        'telco' => $request->telco,
    ]);

    return new UssdThirdpartyAppResource($createUssdthirdpartyapp);         
 } 

api：路由

Route::post('storeUssdthirdpartyapp', 'ApiController@storeUssdthirdpartyapp');

角

下面是我在 Angular 中的模型

型號：ussdthirdpartyapp.ts

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

  id: number;
  name: string;
  description: string;
  ussd_string: string;
  user_id: number;
  call_back: string;
  telco: number;

  user?: User;
  telcoid?: Telco;

  constructor() {}

}

服務.ts

    import { Ussdthirdpartyapp } from '../models/ussdthirdpartyapp';
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 UssdthirdpartyappService {

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

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

/** POST Ussdthirdpartyapp to Ussdthirdpartyapps endpoint */
addUssdthirdpartyapp (ussdthirdpartyapp: Ussdthirdpartyapp): Observable<Ussdthirdpartyapp> {
return this.http.post<Ussdthirdpartyapp>(this.ussdthirdpartyappUrl, ussdthirdpartyapp)
.pipe(
  catchError(this.handleError('addUssdthirdpartyapp' + '/storeUssdthirdpartyapp', ussdthirdpartyapp))
);
}
}

ussd-channel-create-component.ts

     import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { UssdthirdpartyappService } from '../../../services/ussdthirdpartyapp.service';
 import { Ussdthirdpartyapp } from '../../../models/ussdthirdpartyapp';
 import { filter } from 'rxjs/operators';
 import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
 import { NotificationService } from '../../../services/notification.service';
 import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';

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

channelForm: FormGroup;
name:string='';
description:string='';
ussd_string:string='';
call_back:string='';
telco:number=null;
user_id:number=null;
message = '';
isLoadingResults = false;  


constructor(
private router: Router,
private spinnerService: Ng4LoadingSpinnerService, 
private ussdthirdpartyappService: UssdthirdpartyappService,
private notificationService: NotificationService, 
private formBuilder: FormBuilder) { }  

ngOnInit() {

this.channelForm = this.formBuilder.group({
  'name' : [null, Validators.required],
  'description' : [null, Validators.required],
  'ussd_string' : [null, Validators.required],
  'call_back' : [null, Validators.required],
  'telco' : [null, Validators.required]
});
}

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

onFormSubmit(form:NgForm) {
this.spinnerService.show();
this.ussdthirdpartyappService.addUssdthirdpartyapp(form)
  .subscribe(res => {
      let id = res['id'];
      this.spinnerService.hide();
      this.notificationService.onSuccess('Successfully Added.')
      this.router.navigate(['/ussdchanneldetail', id]);
    }, (err) => {
      console.log(err);
      this.spinnerService.hide;
    });
 }  

}

問題是為什么我會在我的 component.ts 中收到此錯誤以及如何解決它。

謝謝

Answer 1

我認為你只需要傳遞表單值。 此外，由於您已經擁有channelForm ，您可以使用channelForm.value簡單地訪問它的值。 所以只需通過：

import { Component, OnInit } from '@angular/core';
...

@Component({...})
export class UssdChannelCreateComponent implements OnInit {

  channelForm: FormGroup;

  ...

  onFormSubmit(form: NgForm) {
    this.spinnerService.show();
    this.ussdthirdpartyappService.addUssdthirdpartyapp(this.channelForm.value)
      .subscribe(...);
  }

}

Answer 2

我有同樣的問題..

我解決了它改變

onFormSubmit(form: NgForm)

經過

onFormSubmit(form: any)