属性“”在类型“对象”上不存在

Question

I was working all day in angular. Everything worked fine all day.
Restarted the server (ng serve). And now suddenly there are alot of errors.
I managed to fix most but I am stuck with this one.

This is the main part of the component .ts file:

import { Component, OnInit } from '@angular/core';
import { HttpService } from '../http.service';

@Component({
  selector: 'app-playboard',
  templateUrl: './playboard.component.html',
  styleUrls: ['./playboard.component.scss']
})
export class PlayboardComponent implements OnInit {
  brews: Object;

  constructor(private _http: HttpService) { }

  ngOnInit() {
    this._http.myMethod().subscribe(data => {
      this.brews = data;
      this.dices = this.brews.myBox;
      this.diceSeed = this.brews.boxID;
      console.log(this.brews);
    });
  }

And this is the http.service.ts file:

import { Injectable } from '@angular/core';
import {HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) { }

  myMethod() {
    return this.http.get<Object>('https://localhost:44398/api/boggle');
  }

  myWordMethod(word) {
    var url = 'https://localhost:44398/api/wordpoints/' + word;
    return this.http.get<Object>(url);
  }
}

It was working all day and suddenly these strange errors appear.
Does anyone have a clue of what could be wrong? Thanks alot!

Answer 1

You can ignore these by simply delcaring them as the any type. For instance;

myWordMethod(word: any) {
    ..
}

this._http.myMethod().subscribe(data: any => {
    ..
});

That said declaring the actual type for TypeScript is often preferred. For Instance if your API sends back a common object with particular properties then declare it as such;

interface MyMethodResponse {
    someProperty: string;
    someNumber: number;
    someArray: string[];
}

this._http.myMethod().subscribe((myMethodResponse: MyMethodResponse) => {
    // TypeScript now knows that these properties exists on the response object
    console.log(myMethodResponse.someArray);           
    console.log(myMethodResponse.someNumber); 
    console.log(myMethodResponse.someProperty); 
});

Answer 2

Remove Object from your http calls. Using the generic is optional, especially if you haven't typed out your response.

import { Injectable } from '@angular/core';
import {HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) { }

  myMethod() {
    return this.http.get('https://localhost:44398/api/boggle');
  }

  myWordMethod(word) {
    var url = 'https://localhost:44398/api/wordpoints/' + word;
    return this.http.get(url);
  }
}

On brews, declare it as any:

import { Component, OnInit } from '@angular/core';
import { HttpService } from '../http.service';

@Component({
  selector: 'app-playboard',
  templateUrl: './playboard.component.html',
  styleUrls: ['./playboard.component.scss']
})
export class PlayboardComponent implements OnInit {
  brews: any;

  constructor(private _http: HttpService) { }

  ngOnInit() {
    this._http.myMethod().subscribe(data => {
      this.brews = data;
      this.dices = this.brews.myBox;
      this.diceSeed = this.brews.boxID;
      console.log(this.brews);
    });
  }