angular HttpClient post put del 方法

经过一周的奋战，终于完成了angular httpclinent的所有方法，实现如下图：

直接上代码吧，之前的配置直接查看angular的前几篇文章。

后台TS代码：

import { Component, OnInit } from '@angular/core';
import { Patient } from './patients.service';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';

@Component({
    selector: 'patient-component',
    templateUrl: 'app/app-patient/patient.component.html',
    //providers: [PatientsService]
})
export class PatientComponent implements OnInit {

    results: string[];
    myPatientList: Patient[] = [];
    myPatient: Patient;
    myWebapiURL = 'http://localhost:52513/api/patients/';
    myHttpHead = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
    private myHttpParams = new HttpParams().set('username', 'dih').set('password', 'dih');
    constructor
        (
        private myhttp: HttpClient
        //private myPatientsService: PatientsService
        )
    { }
    ngOnInit(): void {
        this.results = ["ngOnInit()方法"];
        this.getall();
    }
    getall() {
        //console.log("getall");
        this.myPatientList = [];
        this.myhttp.get(this.myWebapiURL)
            .subscribe(data => {
                let count = (<Array<string>>data).length;
                for (var i = 0; i < count; i++) {

                    this.myPatientList.push(new Patient({
                        id: data[i].PatientId,
                        FirstName: data[i].Details.FirstName,
                        LastName: data[i].Details.LastName,
                        MiddleName: data[i].Details.MiddleName,
                        BirthDate: data[i].Details.BirthDate,
                        Gender: data[i].Details.Gender,
                        PhoneNumber: data[i].PersonalInfo.PhoneNumberPrimary,
                        ZIPCODE: data[i].PersonalInfo.ZIPCODE,
                        City: data[i].PersonalInfo.City,
                        Street: data[i].PersonalInfo.Street,
                        EmailAddress: data[i].PersonalInfo.EmailAddressPrimary,
                        CitizenServiceNumber: data[i].PersonalInfo.ServiceNumber
                    }));
                }
            }
            );
    }


    getbyId(id: string) {
        this.myhttp.get(this.myWebapiURL + id)
            .subscribe(data => {
                this.myPatient = new Patient({
                    id: data['PatientId'],
                    FirstName: data['Details'].FirstName,
                    LastName: data['Details'].LastName,
                    MiddleName: data['Details'].MiddleName,
                    BirthDate: data['Details'].BirthDate,
                    Gender: data['Details'].Gender,
                    PhoneNumber: data['PersonalInfo'].PhoneNumberPrimary,
                    ZIPCODE: data['PersonalInfo'].ZIPCODE,
                    City: data['PersonalInfo'].City,
                    Street: data['PersonalInfo'].Street,
                    EmailAddress: data['PersonalInfo'].EmailAddressPrimary,
                    CitizenServiceNumber: data['PersonalInfo'].ServiceNumber
                });
            });
    }



    httpPostExample(FirstName: string, LastName: string) {
        const body = {
            "Details": {
                "FirstName": FirstName,
                "LastName": LastName,
                "MaidenName": '',
                "MiddleName": '',
                "CustomId": '',
                "BirthDate": "2017-10-18T11:05:51.017",
                "Gender": 1
            },
            "Anatomy": {
                "BodyWeight": 75,
                "BodyHeight": 175,
                "LeftFootLength": 0,
                "RightFootLength": 0,
                "StrideLengthWalking": 0,
                "StrideLengthRunning": 0,
                "PelvisWidth": 0,
                "LeftUpperLegLength": 0,
                "RightUpperLegLength": 0,
                "LeftLowerLegLength": 0,
                "RightLowerLegLength": 0
            },
            "PersonalInfo": {
                "ServiceNumber": '',
                "EmailAddressPrimary": "chenxiaodan@dihmed.com",
                "EmailAddressSecondary": '',
                "PhoneNumberPrimary": '',
                "PhoneNumberSecondary": '',
                "StreetAddress": '',
                "ZIPCode": '',
                "City": '',
                "Street": '',
                "Country": '',
                "EmergencyContactDetails": ''
            },
            "AdditionalProperties": ''
        };
        this.myhttp.post(this.myWebapiURL, body, this.myHttpHead)
            .subscribe(
            (val) => {
                console.log('POST call successful value returned in body', val);
                this.getall();
            },
            response => {
                console.log('POST call in error', response);
            },
            () => {
                console.log('The POST observable is now completed.');
            });
        
    }

    httpPutExample(id: string, FirstName: string, LastName: string) {
        const body = {
            "PatientId": id,
            "Details": {
                "FirstName": FirstName,
                "LastName": LastName,
                "MaidenName": '',
                "MiddleName": '',
                "CustomId": '',
                "BirthDate": "2017-10-18T11:05:51.017",
                "Gender": 1
            },
            "Anatomy": {
                "BodyWeight": 75,
                "BodyHeight": 175,
                "LeftFootLength": 0,
                "RightFootLength": 0,
                "StrideLengthWalking": 0,
                "StrideLengthRunning": 0,
                "PelvisWidth": 0,
                "LeftUpperLegLength": 0,
                "RightUpperLegLength": 0,
                "LeftLowerLegLength": 0,
                "RightLowerLegLength": 0
            },
            "PersonalInfo": {
                "ServiceNumber": '',
                "EmailAddressPrimary": "chenxiaodan@dihmed.com",
                "EmailAddressSecondary": '',
                "PhoneNumberPrimary": '',
                "PhoneNumberSecondary": '',
                "StreetAddress": '',
                "ZIPCode": '',
                "City": '',
                "Street": '',
                "Country": '',
                "EmergencyContactDetails": ''
            },
            "AdditionalProperties": ''
        };
        this.myhttp.put(this.myWebapiURL + id, body, this.myHttpHead)
            .subscribe(
            (val) => {
                console.log('put call successful', val);
                this.getall();
            },
            response => {
                console.log('put call in error', response);
            },
            () => {
                console.log('put is now completed.');
            });

    }


    delbyId(id: string) {
        this.myhttp.delete(this.myWebapiURL + id).subscribe((res) => {
            console.log("del ok", res);
            this.getall();
        }, (err) => {
            console.log("del err", err);
        });
       
    }
}

前台代码：

<div>patient-component.html</div>


{{results}}

<h2>ngfor</h2>
<div *ngIf=myPatientList>
    <ul>
        <li *ngFor="let myPatient of myPatientList">
            id:<span style="font-weight:700"> {{myPatient.id}} </span> FirstName :{{myPatient.FirstName}}
        </li>
    </ul>

</div>
<div>
    <input type="text" #txt1 placeholder="请输入要查询的GUID">
    <button (click)="getbyId(txt1.value)"> 查询</button>
    <button (click)="delbyId(txt1.value)"> 删除</button>


    <div *ngIf=myPatient>
        <ul>
            <li>id:{{myPatient.id}}</li>
            <li>FirstName :{{myPatient.FirstName}} </li>
            <li>email:{{myPatient.EmailAddress}}</li>
        </ul>
    </div>
</div>
<div>
    FirstName :<input type="text" #txtFirstName placeholder="请输入FirstName">
    LastName :<input type="text" #txtLastName placeholder="请输入LastName">
    <button (click)="httpPostExample(txtFirstName.value,txtLastName.value)"> httpPostExample【新增】</button>
    <button (click)="httpPutExample(txt1.value,txtFirstName.value,txtLastName.value)"> httpPutExample【修改】</button>
    
</div>

。。。。。。。。angular4.3 httpclient end.....