angular 4 typescript validation error Object literal may only specify known properties

Question

my service

import {Account} from '../models/Account';

  export class AccountingService {
  domain: string = "http://localhost:3000/api";

  constructor(private http: HttpClient) {  }

  getAccounts(){
    return  this.http.get<Account[]>(`${this.domain}/accounts` )
              .map(res => res)
  }

  addAccount(newAccount:Account){
    return  this.http.post(`${this.domain}/accounts`,newAccount)
              .map(res=>res);
  }

  updateAccount(newAccount: Account){
    return this.http.put(`${this.domain}/accounts/${newAccount.id}`,newAccount)
              .map(res=>res);
  }

  deleteAccount(id){
    return  this.http.delete(`${this.domain}/accounts/${id}`)
              .map(res=>res);
  }
}

my model

export class Account{
    _id?: string;
    name: string;
    amount: number;

}

my component

import {AccountingService} from '../../services/accounting.service';

@Component({
  selector: 'app-accounting',
  templateUrl: './accounting.component.html',
  styleUrls: ['./accounting.component.css']
})
export class AccountingComponent implements OnInit {
  accounts:Account[];
  name:string;
  amount:number;
  constructor(private accountService : AccountingService ) {

    this.accountService.getAccounts()
      .subscribe(accounts =>{
        console.log(accounts);
      })

   }

   addAccount(event){
    event.preventDefault();
    const newAccount : Account={
      name: this.name,
      amount: this.amount
    };

    this.accountService.addAccount(newAccount);
   }

getAccounts() works perfectly but addAccount function give me a

error Object literal may only specify known properties and amount in does not exist in type Account

it may be a logical error but I do not know how to solve it in this moment

This looks like code that should work without any error: Can you provide Stackblitz example? Also check that you haven't misstyped any property :) also instead of exporting class Account try export interface Account — Roman Šimík
– Roman Šimík, Commented Dec 13, 2018 at 19:08
github.com/michelnovellino/angular-crud the repository on github — Michel Novellino
– Michel Novellino, Commented Dec 13, 2018 at 19:53

Roman Šimík · Accepted Answer · 2018-12-14 20:42:42Z

1

Problem 1 - You didn't have imported Account interface in your AccountingComponent.

Add import { Account } from '../../models/Account'; in your AccountingComponent

Problem 2 - In your AccountingService the addAccount function have generic type <Account>, so you need to also define the type that you are returning from that method also as Account and not the default (which is any). You can solve this by setting type of the res as Account.

addAccount<Account>(newAccount:Account) {
    return this.http.post(`${this.domain}/accounts`,newAccount)
       .map((res: Account) => res);

}

edited Dec 14, 2018 at 20:42

answered Dec 14, 2018 at 9:34

Roman Šimík

91110 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix Movee · Accepted Answer · 2018-12-13 17:18:32Z

0

It seems that you have forgotten to make your service Injectable (and maybe haven't declared it in the provider list.

answered Dec 13, 2018 at 17:18

Felix Movee

3363 silver badges11 bronze badges

Collectives™ on Stack Overflow

angular 4 typescript validation error Object literal may only specify known properties

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related