Question

当我可以在浏览器的“网络”选项卡中看到响应时，有人可以帮助我在html页面中显示contractID的方法：http：localhost：8080 / api-> {contractId：70，contractName：“ HealthPlan2” ，contractServiceList ：....}。我很困惑，因为我没有从Web API显式获取方法来获取此数据，但可以在浏览器中看到此响应。目前，我使用http.post（）保存到API中，我完全不知道Angular的此功能。有人请解释它是如何内部运行的，以及如何获取自动生成的ID，这不是post方法的一部分。关于拦截器的任何建议都会很好。

在app.component.ts

中

createForm(data: any): FormGroup {
    return this.formBuilder.group({
      contractId: [data ? data.contractId : ''],
      contractName: [data ? data.contractName : '', Validators.required],
      contractServiceList: this.formBuilder.array(
             this.createContractService(data ? data.contractServiceList : null),this.arrayValidator()
              )
      });
  }
ngOnInit() {
     {
    this.addForm = this.createForm(null);
    //  this.addForm.get('contractName').valueChanges.subscribe(changes => { console.log(changes) } )
   // this.addForm.valueChanges.subscribe(changes => { console.log( '*', changes) } )
    }
  }
onSubmit() {
    this.submitted = true;
    this.successMessage = '';
    this.errorMessage = '';
    console.log(this.addForm.value);
    if (this.addForm.invalid) {
            return;
        }
        this.getByName;
    this.contractService.saveContract(this.addForm.value)
      .subscribe( data => {
        this.successMessage = 'Contract created successfully';
      });
  }

在app.component.html

中

 <table>
<thead></thead>
<tbody>
<tr>
  <td>
    <input type="text" name="contractId" ng-model="contractId" style="display: none;"/>
  </td>
   <td>
   <div class="form-group col-xs-6">
      <label for="contractName">Contract Name:</label>
      <input formControlName="contractName" placeholder="Contract Name" class="form-control" name="contractName" id="contractName">
   <!--  <div *ngIf="submitted && f.contractName.errors" class="invalid-feedback">
                            <div *ngIf="f.contractName.errors.required">Contract Name is required</div>
                        </div> -->
                    </div>
   </td>
   <td>
 <div class="form-group col-xs-6">
     <h4 style="margin-left:100px;">Penalty Conditions</h4>
    </div>
</td>  
</tr>
</tbody>
</table>
<div formArrayName="contractServiceList">
<div *ngFor="let items of contractList.controls; let i=index" 
            [formGroupName]="i">
<table>
<thead></thead>
<tbody>
<tr> 
<td>
    <div class="form-group col-xs-6">
      <label for="serviceId">Category Of Services:</label>
      <select id ="serviceId" [(ngModel)]="serviceId" formControlName="serviceId" name="serviceId" class="form-control">
    <option value="1">Emergency Room</option>
    <option value="2">OP Radiology</option>
</select>
      </div>
    </td>
<td>
 <div class="form-group col-xs-6">
      <label for="penaltyApplies">Penalty Applies:</label>
       <select id ="penaltyApplies" formControlName="penaltyApplies" name="penaltyApplies" class="form-control">
    <option>Y</option>
    <option>N</option>
</select>

.....

在service.ts

saveContract(contract: Contract) {
    return this.http.post(this.baseUrl, contract).pipe(map(res => res.json));
  }

Answer 1

从聊天部分可以明显看出OP正在使用Http。相反，您可以将HttpClient应用于{4}及以上的角度@angular/common/http

import { HttpClient } from '@angular/common/http'
export class ContractService { 
     constructor(private http: HttpClient) { } 
     ......
}

您可能还需要在应用程序模块中导入HttpClientModule。

import { HttpClientModule } from '@angular/common/http';

@NgModule({
 imports: [
   HttpClientModule
 ],

同样，您也无需使用此方法将您的resp显式转换为json，默认情况下，您已经获得json数据，该数据由新的角度HttpClient转换。因此，在您的情况下，您确实不需要地图，因为您只想返回到component

import { HttpClient } from '@angular/common/http'
import { catchError } from 'rxjs/operators';

export class ContractService { 
     constructor(private http: HttpClient) { } 

     saveContract(contract: Contract) {
        return this.http.post(this.baseUrl, contract).pipe(
          catchError(this.handleError));
     }
}

Answer 2

Post方法的响应在您的saveContract函数中作为可观察值返回，并且也正确映射到Json。因此您可以订阅以检索所需的字段。

在<Video />函数内部：

onSubmit()

如何从Angular 6中的HTTPResponse POST方法获取特定字段

2 个答案: