Question

我开发了一个简单的表单，我必须使用HTTP Post以角度4发布数据。因此，我发送POST请求，然后服务器将状态设置为200 OK。但我没有从服务器获得任何响应数据。我正在使用基本身份验证。

    postInvoiceDetails(invoice: Invoice): Observable<Invoice>{
            let headers = new Headers();
            let options = new RequestOptions({ headers: headers });        
            this.authorizeHeaders(headers);
            return this.http.post(this.config.apiUrl + 'entity/node?_format=hal_json', invoice, options)
            .map(this.extractData)
            .catch(this.handleErrorObservable);
        }

        private extractData(res: Response) {
            let body = res.json();
                return body.data || {};
        }

        private handleErrorObservable (error: Response | any) {
            console.error(error.message || error);
            return Observable.throw(error.message || error);
        }

//Basic Authentication with username and password
     authorizeHeaders(headers: Headers){
         console.log('Getting Headers Info.');
        //let headers = new Headers();
        headers.append('Authorization', 'Basic ' + btoa('apiuser:@piUser@2017Supplier'));
        let options = new RequestOptions();
        options.headers = headers;
        console.log(options);
    }

当我发送帖子请求时，POST请求显示200 Ok。请参阅以下屏幕以供参考。

另一个问题是我面临的是我无法使用ngModel进行双向数据绑定。当我使用它然后它说“RROR TypeError：无法在表单中读取未定义的属性'nid'。

<div class="container">
<app-dialog [(visible)]="showDialog">

    <div style="background-color:#363636; color:#ffffff; padding: 7px;
    margin: -12px -12px 12px -12px;">ADD NEW INVOICE</div>
    <div><label>Request ID *</label><input type="text" [(ngModel)]="item.nid"></div>
    <div><label>Date *</label>

      <my-date-picker name="mydate" [options]="myDatePickerOptions"
      required></my-date-picker>

    </div>
    <div><label>Category *</label></div>
    <div><label>Details *</label></div>
    <div><label>Job (Optional)*</label></div>
    <div><label>Select Upload</label>
  <p>
    Single: <input type="checkbox" name="uploadtype" value="single" />
    Weekly: <input type="checkbox" checked name="uploadtype" value="weekly" />
    Monthly: <input type="checkbox" name="uploadtype" value="monthly" /><br />
  </p>
    </div>
    <div>Upload Document *: <span>
      <input type="file" name="pic" accept="image/*">

    </span></div>
    <div>Amount *</div>
    <button type="submit" class="btn btn-success" (click)="onSubmit()">Submit</button>

  <div *ngIf="email" [ngClass] = "'success'"> {{email}} Added. </div>
  <div *ngIf="errorMessage" [ngClass] = "'error'"> {{errorMessage}} </div> 
  </app-dialog>
</div>
  <!--Dialog box markup end -->

上面的对话框是用另一个组件编写的，我试图使用我在invoice.component.html中创建的对象。但它不起作用。

任何人都可以帮助我吗？这里的演示也带有代码。 DEMO

获取ngModel和REST API调用标题

0 个答案: