Question

我使用Angular 7作为前端和Laravel 5.8作为后端设计了一个应用程序。我在POSTMAN中测试了每个程序，并且效果很好。我在ussd-channel-create.component.ts

中遇到了此错误

src / app / components / ussd / ussd-channel-create / ussd-channel-create.component.ts.ts（58,56）中的错误：错误TS2345：“ NgForm”类型的参数不可分配给“ Ussdthirdpartyapp”类型的参数。类型“ NgForm”缺少类型“ Ussdthirdpartyapp”中的以下属性：id，描述，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)

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

2 个答案: