title: Angular 6: ERROR TypeError: "... is not a function" - but it is
body: <p>I am currently really confused, because I get the <code>ERROR TypeError: "_this.device.addKeysToObj is not a function"</code>. But I implemented the function, so I have no idea what's the problem or why it is not callable. I have tried the code with Firefox and chrome, both through the same error.</p>
  
  <p>The error is in line <code>this.device.addKeysToObj(this.result.results[0]);</code></p>
  
  <p>Here is my class:</p>
  
  <pre><code>export class Device {
      id: number;
      deviceID: string;
      name: string;
      location: string;
      deviceType: string;
      subType: string;
      valueNamingMap: Object;
  
      addKeysToObj(deviceValues: object): void {
          for (let key of Object.keys(deviceValues).map((key) =&gt; { return key })) {
              if (!this.valueNamingMap.hasOwnProperty(key)) {
                  this.valueNamingMap[key] = '';
              }
          }
          console.log(this, deviceValues);
      }
  }
  </code></pre>
  
  <p>And that is the call:</p>
  
  <pre><code>export class BatterieSensorComponent implements OnInit {
      @Input() device: Device;
      public result: Page&lt;Value&gt; = new Page&lt;Value&gt;();
  
      //[..]
  
      ngOnInit() {
        this.valueService.list('', this.device).subscribe(
          res =&gt; {
            console.log(this.device);  // NEW edit 1
            this.result = res;
            if (this.result.count &gt; 0) 
            {
              this.device.addKeysToObj(this.result.results[0]);
            }
          }
        )
      }
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Edit 1</strong></p>
  
  <p>Logging <code>this.device</code> see comment in code above:</p>
  
  <pre><code>{
      deviceID: "000000001" 
      deviceType: "sensor"    ​
      id: 5    ​
      location: "-"
  ​    name: "Batteries"    ​
      subType: "sensor"    ​
      valueNamingMap:
        Object { v0: "vehicle battery", v1: "Living area battery" }
      &lt;prototype&gt;: Object { … } 
  }
  </code></pre>
  
  <p><strong>Edit 2</strong></p>
  
  <p>Part of the device.service code:</p>
  
  <pre><code>list(url?: string, deviceType?: string, subType?: string): Observable&lt;Page&lt;Device&gt;&gt; {
    if(!url) url = `${this.url}/devices/`;
    if(deviceType) url+= '?deviceType=' + deviceType;
    if(subType) url+= '&amp;subType=' + subType;
  
    return this.httpClient.get&lt;Page&lt;Device&gt;&gt;(url, { headers: this.headers })
      .pipe(
        catchError(this.handleError('LIST devices', new Page&lt;Device&gt;()))
      );
  }
  </code></pre>
  
  <p>The call in the parent component:</p>
  
  <pre><code>ngOnInit() {
    this.deviceService.list('', 'sensor', ).subscribe(
      res =&gt; { 
        this.devices = res.results;
      }
    )
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;div class="mdl-grid"&gt;
    &lt;div class="mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet" *ngFor="let device of devices"&gt;
      &lt;app-batterie-sensor [device]="device"&gt;&lt;/app-batterie-sensor&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>