Question

我尝试发出有角度的发布请求，但是正在发送的值显示为null。我认为初始化后未设置模型值。这是我的代码。我不确定为什么模型中会显示空值？

OnInit

  protected initModel() {
    this.model = {
      basics: null,
      retirement: null,
      risk: null,
      users: null
    };
  }

主要功能

  saveAsDraft() {
    console.log(this.model);
    this._confirmationService.confirm({
      header: 'Save as draft?',
      message: 'Your changes will be lost if you don\'t save them.',
      acceptLabel: 'SAVE DRAFT',
      rejectLabel: 'DON\'T SAVE',
      icon: null,
      accept: () => {
        this._corpService.createCorporate(true, this.model)
        .subscribe((resp) => {
          if (resp) {
            this._notificationService.openNotification('Corporate successfully created.');
            this._routingService.editCorporate(resp, 'users');
          }
        }, (error) => {
          this._errorService.openErrorPopup('Failed to create corporate.');
        }
      );
        this._notificationService.openNotification('Corporate successfully created as draft.');
      },
      reject: () => {
        this._routingService.corporateDashboard();
      }
    });
  }

服务电话

  createCorporate(isDraft: boolean, corporateToCreate: Corporate): Observable<any> {
    const headers = new HttpHeaders().set('Content-Type', 'application/json');
    const options = { headers: headers };
    const url = `${this.corporateUrl}/Create`;
    const data = JSON.stringify(corporateToCreate);
    return this._http.post<any>(url, data, options);
  }

控制台日志在saveDraft方法中显示了这一点

{basics: null, retirement: null, risk: null, users: null}
basics: null
retirement: null
risk: null
users: null
__proto__: Object

HTML

<div>
    <app-admin-subheader
    [title]="'Create corporate'" 
    [text]="'Complete the following information to create the corporate profile'" 
    [proceedBtnLabel]="'SAVE AS DRAFT'"
    (proceed)="saveAsDraft()"
    (back)="onCancelCreateCorporate()"
    >
  </app-admin-subheader>

  <div *ngIf="model" class="page create-corporate candidate-profile">
    <div class="row tab-row">
      <button (click)="switchTab('basics')" [ngClass]="activeTab == 'basics' ? 'active' : 'not-active'" class="tab"> BASICS </button>
      <button (click)="switchTab('retirement')" [ngClass]="activeTab == 'retirement' ? 'active' : 'not-active'" class="tab"> RETIREMENT </button>
      <button (click)="switchTab('risk')" [ngClass]="activeTab == 'risk' ? 'active' : 'not-active'" class="tab"> RISK </button>
      <button (click)="switchTab('users')" [ngClass]="activeTab == 'users' ? 'active' : 'not-active'" *ngIf="mode != 'create'" class="tab"> USERS </button>
      <button (click)="switchTab('subgroups')" [ngClass]="activeTab == 'subgroups' ? 'active' : 'not-active'"  *ngIf="mode != 'create'" class="tab"> SUBGROUPS </button>
    </div>

    <app-basics-tab 
      *ngIf="activeTab == 'basics'" 
      [mode]="mode" 
      [(basics)]="model.basics" 
      (saveTemp)="saveTemp($event)" 
      (next)="next($event)">
    </app-basics-tab>

    <app-retirements-tab 
      *ngIf="activeTab == 'retirement'" 
      [mode]="mode" 
      [(retirement)]="model.retirement" 
      (saveTemp)="saveTemp($event)" 
      (next)="next($event)"
      [corporateName]="model.basics.name">
    </app-retirements-tab>

    <app-risk-tab 
      *ngIf="activeTab == 'risk'" 
      [mode]="mode" 
      [(risk)]="model.risk" 
      (saveTemp)="saveTemp($event)" 
      (next)="next($event)">
    </app-risk-tab>

    <app-users-tab 
      *ngIf="activeTab == 'users'" 
      [mode]="mode" 
      [(users)]="model.users" 
      (saveTemp)="saveTemp($event)" 
      (next)="next($event)">
    </app-users-tab>

    <app-view-subgroups-tab 
      *ngIf="activeTab == 'subgroups'"
      [subgroups]="model.subgroups" 
      [corporateId]="model.basics.id" 
      (next)="next($event)">
    </app-view-subgroups-tab>

  </div>
</div>

<p-confirmDialog header="Confirmation" [closable]="false" icon="pi pi-exclamation-triangle"></p-confirmDialog>

<app-success-message></app-success-message>

我在这里设置模型值

  initBasicsModel(): CorporateBasics {

    return {
      id: null,
      name: null,
      industryId: null,
      primaryColour: '#dcdcdc',
      payrollDay: null,
      companyTypeId: null,
      headerLogoId: null,
      footerLogoId: null,
      locations: [{id: 1 , name: ''}]
    };
  }


export class CorporateBasics {
  id: string;
  name: string;
  payrollDay: number;
  industryId: string;
  companyTypeId: string;
  primaryColour: string;
  headerLogoId: string;
  footerLogoId: string;
  locations:    [
    {
      id: number;
      name: string;
    }
  ];
}

Answer 1

如果您使用

const headers = new HttpHeaders().set('Content-Type', 'application/json');

...那么您无需对数据进行字符串化处理。只要做：

return this._http.post<any>(url, corporateToCreate, options);

此外，我不知道您使用的是哪个后端，但是您需要确保尝试从corporateToCreate而不是body获取uri正在使用这种方法。

此答案还假设_http的类型为HttpClient。

我的帖子请求中发送了空值

1 个答案: