Angular 4 Error TypeError, ERROR Context

问题:

I am getting the TypeError and Context Error from my code. I have looked at these stack questions:

Angular 4 - ERROR TypeError, ERROR CONTEXT DebugContext_

angular 2 on from submit error self.context.onSubmit is not a function

I cannot find the issue within my code. The error is as follows

TypeError: Cannot read property 'subscribe' of undefined
    at UnlockComponent.webpackJsonp.../../../../../src/app/unlock/unlock.component.ts.UnlockComponent.unlock (unlock.component.ts:252)
    at Object.eval [as handleEvent] (UnlockComponent.html:81)
    at handleEvent (core.es5.js:12022)
    at callWithDebugContext (core.es5.js:13486)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13074)
    at dispatchEvent (core.es5.js:8615)
    at core.es5.js:9226
    at HTMLButtonElement.<anonymous> (platform-browser.es5.js:2651)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)

and

UnlockComponent.html:81 ERROR CONTEXT 
DebugContext_ {view: {…}, nodeIndex: 120, nodeDef: {…}, elDef: {…}, elView: {…}}
component
:
(...)
componentRenderElement
:
(...)
context
:
(...)
elDef
:
{index: 120, parent: {…}, renderParent: {…}, bindingIndex: 12, outputIndex: 6, …}
elOrCompView
:
(...)
elView
:
{def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: UnlockComponent, …}
injector
:
(...)
nodeDef
:
{index: 120, parent: {…}, renderParent: {…}, bindingIndex: 12, outputIndex: 6, …}
nodeIndex
:
120
providerTokens
:
(...)
references
:
(...)
renderNode
:
(...)
view
:
{def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: UnlockComponent, …}
__proto__
:
Object

The error is referring to this HTML line:

    <button class="btn-primary" (click)="unlock()">
      Yes
    </button>

and this function in my component.ts file:

unlock() {
    let observer = {
      next(data) {
        data => console.log(data)
      },
      error(error) {
        return new Error('Post Error');
      },
      complete() {
        console.log("Completed");
        // window.location.reload();
      }
    };
    // On unlock send lock data to Service for POST
    this.http.postUnlock(this.unlocked).subscribe(observer);
  }

which refers to a service.ts function:

    import { Injectable } from '@angular/core';
import { Http, Headers, URLSearchParams, RequestOptions, RequestMethod, ResponseContentType } from '@angular/http';
import { HttpParams } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

@Injectable()

export class apiService {
  // SET URL STRING FOR API CALL
  // url: string = 'https://ineowebm7.azurewebsites.net/api/UnlockApis';
  url: string = 'https://portal2.ineotech.com/ineoM7reference/api/UnlockApis';
  body: Array<any> = [];

  // SET HTTP TO PRIVATE
  constructor(private http: Http) {}

  // GET LOCK RESOURCES
  getLocked() {
    // set observable
    return this.http.get(this.url).map((res) => res.json());
  }

  // POST to UNLOCK RESOURCES
  postUnlock(locked) {
    return locked.forEach((lock) => {
      let headers = new Headers();
      headers.append( 'Content-Type', 'application/json');
      headers.append('Access-Control-Allow-Origin', '*');
      let newBody = JSON.stringify(lock);
      let auth = lock.AuthID;
      let form = lock.FormName;
      let options = new RequestOptions({ headers: headers, method: 'post', body: newBody });
      let newUrl = this.url + `?authid=${auth}&formname=${form}`;
      console.log(newUrl);
      // POST to URL
      return this.http.post(newUrl, options).map((res )=> res.json());
    });
  }

}

I have made sure the function in the component and the (click) are the same and not misspelled.

Has anyone seen this before or could point out the issue to what is going on?

Thanks