从发布请求Angular / .NET Core获取数据

Question

I'm having trouble getting a JSON response from a POST Request from my .Net Core server. In essence I would be using this POST request like a GET request from the server. I believe I'm passing in the correct headers, however, in my console error I'm getting

ERROR TypeError: Cannot read property 'sessionId' of undefined

I suspect it's something that has to do with the type and/or model. Or possibly how I'm calling it in the service. If I need to add anything for clarification, lmk.

.NET CORE Server Code

Action.Dto

{
public class ActionDto
{
    public string SessionId { get; set; }
    public Tag ActionTag { get; set; }
    public ActionParams Args { get; set; }
}

}

ActionService.cs

    {
    ActionResponse LaunchAction(string sessionId, Tag actionTag, ActionParams args, UserState userState);
}

Action Controller

 public IActionResult LaunchAction([FromBody]ActionDto launchActionParameters)
    {
        var sessionId = launchActionParameters.SessionId;
        var actionTag = launchActionParameters.ActionTag;
        var args = launchActionParameters.Args;
        UserState userState = null;
        RunAction runAction = null;

Angular Client Code

Action Component

       export interface ActionView {
  actionName: string;
  actionType: string;
  primaryTable: string;
  specialUse: string;
  folder: string;
  actionDescription: string;
  actionTag: number;
  chartType: string;
  priority: number;
}

const ACTION_DATA: ActionView[] = [];

@Component({
  templateUrl: 'home.component.html'
})
export class HomeComponent implements OnInit, OnDestroy {

    // User Fields
    currentUser: User;
    users: User[] = [];
    currentUserSubscription: Subscription;

    // Action Fields
    currentAction: Action;
    actions: Action[]  = [];


    displayedColumns: string[] =
    ['actionName', 'actionType', 'primaryTable', 'specialUse',
    'folder', 'actionDescription', 'actionTag', 'chartType',
     'priority'];

    dataSource: any = new MatTableDataSource(ACTION_DATA);

    constructor(
        private authenticationService: AuthenticationService,
        private iconRegistry: MatIconRegistry,
        private sanitizer: DomSanitizer,
        private httpClient: HttpClient,
        private actionService: ActionService
    ) {
        this.currentUserSubscription = this.authenticationService.currentUser.subscribe(user => {
            this.currentUser = user;
        });
        this.iconRegistry.addSvgIcon(
          'thumbs-up',
         this.sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
    }

    @ViewChild(MatSort) sort: MatSort;

   public getActions() {
      console.log('test');

      this.actionService.getActions(
        this.currentAction).subscribe((data) => {
          this.dataSource = data;
        });
    }

    ngOnInit() {
      this.dataSource.sort = this.sort;
      this.getActions();
    }

    ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.currentUserSubscription.unsubscribe();
    }
}

Action Service

@Injectable({ providedIn: 'root' })
export class ActionService {

  public apiURL = 'http://localhost:15217/api';
  public currentUser: Observable<User>;
  public currentAction: Observable<Action>;

    constructor(private http: HttpClient) { }
      // Http Options
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };

  getActions(action: Action): Observable<Action[]> {
    return this.http.post<Action[]>(this.apiURL + '/actions/launchactions',
    {
        sessionId: action.sessionId,
        tag: action.actionTag,
        actionParams: action.actionParams
     })
    .pipe(
      retry(1),
      catchError(this.handleError)
    );
  }

    // Error handling
    handleError(error: any) {
      let errorMessage = '';
      if (error.error instanceof ErrorEvent) {
        // Get client-side error
        errorMessage = error.error.message;
      } else {
        // Get server-side error
        errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
      }
      window.alert(errorMessage);
      return throwError(errorMessage);
   }

Answer 1

add [FromBody] to controller side service, before the parameter. Post method pass parameters in body.

like

ActionResponse LaunchAction([FromBody]string sessionId, [FromBody]Tag actionTag, [FromBody]ActionParams args, [FromBody]UserState userState);

I don't know why microsoft did not decide to do this default.

Answer 2

您应该从数据中删除{}：{}通过这样做，您正在为该对象分配一个空对象

Answer 3

What if you remove the "params" word from your angular http post call ?

So the http post call is this instead

return this.http.post<Action[]>(this.apiURL + '/actions/launchactions', 
     {
        sessionId: action.sessionId,
        tag: action.actionTag,
        actionParams: action.actionParams
     })
    .pipe(
      retry(1),
      catchError(this.handleError)
    );