Как извлечь определенное поле из метода HTTPResponse POST в Angular 6

Question

Может кто-нибудь помочь мне с подходом к отображению contractID на html-странице, когда я смог увидеть ответ на вкладке Network браузера: http: localhost: 8080 / api -> {contractId: 70, contractName: "HealthPlan2" , contractServiceList : ....}. Я сбит с толку, поскольку у меня нет явного метода get из Web API для извлечения этих данных, но я вижу этот ответ в своем браузере. В настоящее время я сохраняю в API с помощью http.post (), я совершенно не знаю об этой функциональности Angular. Кто-то, пожалуйста, объясните, как это работает, и как я могу получить автоматически сгенерированный идентификатор, который не является частью моего метода записи. Любое предложение по перехватчику было бы хорошо.

В 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>

.....

В сервис.ц

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
 ],

А также вам не нужно явно преобразовывать ваши соотношения в 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.так что вы можете подписаться на получение полей, которые вы хотите.

внутри вашей функции onSubmit():

 this.contractService.saveContract(this.addForm.value)
      .subscribe( (data:any) => {

       //here you can access contractID:
       this.contractIdShownInUI = data.contractID;  

       this.successMessage = 'Contract created successfully';
      });