角度4打字稿验证错误对象文字只能指定已知属性

时间:2018-12-13 17:08:31

标签: angular typescript angular4-httpclient

我的服务

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);
  }
}

我的模特

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

}

我的组件

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()可以完美运行,但是addAccount函数给我一个

  

错误对象文字可能仅指定已知属性,而帐户类型中不存在金额

这可能是一个逻辑错误,但我是新手,我不知道如何解决它对我有帮助:(

2 个答案:

答案 0 :(得分:1)

问题1-您尚未在Account中导入AccountingComponent界面。

在您的计算机中添加import { Account } from '../../models/Account'; AccountingComponent

问题2--在AccountingService中的addAccount函数具有通用类型<Account>,因此您还需要定义从中返回的类型方法也设为Account,而不是默认值(即any)。您可以通过将res的类型设置为Account来解决此问题。

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

}

答案 1 :(得分:0)

您似乎忘记了将服务设为可注入(也许未在提供者列表中声明它。)