Angular - 错误 TS2345：“NgForm”类型的参数不可分配给“Ussdthirdpartyapp”类型的参数

Question

我设计了一个应用程序，使用 Angular 7 作为前端，Laravel 5.8 作为后端。我在 POSTMAN 中测试了每一个，它运行良好。我在我的 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 中得到了这个

Laravel：

模型类：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
      ];
 }
}

ApiController

    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

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() {}

}

service.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)