角2打字稿：域（）不是一个函数

问题描述：

export class Article { 
    id : number; 
    isanon : boolean; 
    title: string; 
    link: string; 
    text: string; 
    subverse : string; 
    userID : string; 
    votes: number; 

    constructor(title: string, link: string, subverse : string, text : string, userID : string, votes?: number) { 
    this.title = title; 
    this.link = link; 
    this.text = text; 
    this.subverse = subverse; 
    this.userID = userID; 
    this.votes = votes || 0; 
    } 

    log() : void{ 
    console.log("Title: " + this.title + " Link: " + this.link + " subverse: " + this.subverse); 
    } 

    domain(): string { 
    try { 
     const link: string = this.link.split('//')[1]; 
     return link.split('/')[0]; 
    } catch (err) { 
     return null; 
    } 
    } 

    voteUp(): void { 
    this.votes += 1; 
    } 

    voteDown(): void { 
    this.votes -= 1; 
    } 


}

，我用观察到的服务

export class HomeComponent implements OnInit { 
    articles : Article[];

从数据库中获取物品和...

this.service.GetArticles(this.subverseStr).subscribe((data)=>{ 
    this.articles = <Article[]>data; 
    });

但是，在我的HTML模板中，它不能识别domain（）或任何其他TS函数。

<div class="meta">({{ article.domain() }})</div>

当加载页面时，我得到错误：

core.umd.js:2837 EXCEPTION: Error in app/article/article.component.html:15:20 caused by: self.context.article.domain is not a function

它并认识到它作为一个功能，如果我硬代码我的文章[]，它并认识到成员变量。任何想法是怎么回事？谢谢。

请提供'GetArticles'和其他相关部分的代码。根本不明显，'data'是'Article'实例的数组，'{{article ...'引用'Article'实例并不明显。 [MCVE]（http://*.com/help/mcve）是必要的。 – estus

GetArticles和其他代码可以在这里找到：https：//github.com/claysmith/hackerspulse/blob/master/wwwroot/app/services/app.service.hackerspulse.ts –

GetArticles返回解析的JSON。这不是'文章'。并且不能有'域名'方法。 – estus

答

GetArticles回报解析JSON，它是从res.json()一个普通的对象，而不是实例的数组Article。所以它不能有domain方法。

<Article[]>data欺骗式打字系统，所以Typescript认为它是Article[]并且不会警告类型不匹配。

这取决于究竟是从服务器返回的，应该像

GetArticles(subverse : string) : Observable<Article[]> 
{ 
    return this.http.get(...) 
    .map(res => { 
     let data: any = res.json(); 
     let dataArr: any[] = Object.values(data); 

     return dataArr.map(({ title, link, ... }) => { 
     return new Article(title, link, ...); 
     }); 
    }) 
    .catch(this.handleError); 

}

我建议移动由Article和JSON响应和共享属性（title，link，...）来通用的TypeScript接口，这可以使类型更紧密。

答

尝试不带（）。就像是：

{{arcticle.domain}}

这基本上是一个指针到您的功能和Angular2将设法调用该函数

当我尝试没有括号时，它只是空的。像空白字符串。 –

@estus当我在课堂上将它定义为这样的时候，为什么它不是一个函数？ –

@ClaySmith因为你从'GetArticles'获得的东西不是'Article'类的实例。它是'res.json（）'中的普通对象。你用'

数据'欺骗了输入系统，所以Typescript认为它是'Article []'，并且不会警告类型不匹配。 – estus

答

数据'欺骗了输入系统，所以Typescript认为它是'Article []'，并且不会警告类型不匹配。 – estus

角2打字稿：域（）不是一个函数

相关推荐