Node.js angular 2更改服务以从后端获取rest api

因此，我准备交换我的阵列，以便从我的节点后端获取rest api，但我不确定如何转换我的服务，以便它这样做，或者转换为此所需的模块。比如我应该进口什么东西。该服务当前与站点一起工作，但希望在节点运行时将阵列交换为rest api

角度2服务

/**
 * Created by g62 on 23/01/17.
 */
export interface Article {
    // Unique Id
    id: string;
    // Ref on category belongs to
    categoryId: string;
    //genre
    genre: string;
    // The title
    title: string;
    // Price
    rating: number;
    //director
    director: string;
    //cast
    cast: string;
    //production
    production: string;
    // Description
    description: string;
    // Plot
    plot: string;
    //opinion
    opinion: string;
    // Mark article with special rating
    isSpecial: boolean;
    // Path to small image
    imageS: string;
    // Path to large image
    imageL: string;
}

export class ArticleService {
// basic want to change this part so it accepts the rest api which is localhost:3000/api/article or something like that
    private articles: Article[] = [
        // Bakery
        { id: '1', categoryId: '1', title: 'Lion King', rating: 1.5, isSpecial: false, imageL: 'http://placehold.it/1110x480', imageS: 'http://placehold.it/270x171', director: 'some guy at disney', description: 'It a great movie about talking animals', plot:'disney plot', opinion:'one of my favorite movies', production: 'how was it made' },
        { id: '2', categoryId: '1', title: 'Big Hero 6', rating: 5, isSpecial: false, imageL: 'http://placehold.it/1110x480', imageS: 'http://placehold.it/270x171', description: 'It a movie about six kids and a puffy robot', plot:'disney plot', opinion:'my favorite movie in 2015',production: 'how was it made' },
        { id: '3', categoryId: '1', title: 'Lilo and Stitch', rating: 7, isSpecial: false, imageL: 'http://placehold.it/1110x480', imageS: 'http://placehold.it/270x171', description: 'A disney movie that takes place on Hawaii', plot:'disney plot', opinion:'my favorite disney movie',production: 'how was it made' }

    ];

    getArticles(category?: string, search?: string) {
        if (category) {
            return this.articles.filter((article: Article, index: number, array: Article[]) => {
                return article.categoryId === category;
            });
        } else if (search) {
            let lowSearch = search.toLowerCase();
            return this.articles.filter((article: Article, index: number, array: Article[]) => {
                return article.title.toLowerCase().indexOf(lowSearch) != -1;
            });
        } else {
            return this.articles;
        }
    }

    getArticle(id: string): Article {
        for (let i = 0; i < this.articles.length; i++) {
            if (this.articles[i].id === id) {
                return this.articles[i];
            }
        }
        throw new ArticleNotFoundException(`Article ${id} not found`);
    }
}

export class ArticleNotFoundException extends Error {
    constructor(message?: string) {
        super(message);
    }
}

/**
*g62于2017年1月23日创建。
*/
导出接口文章{
//唯一Id
id：字符串；
//类别上的Ref属于
类别ID：字符串；
//体裁
体裁：弦乐；
//标题
标题：字符串；
//价格
评级：数字；
//导演
导演：弦；
//铸造
演员：弦；
//生产
制作：细绳；
//描述
描述：字符串；
//密谋
情节：字符串；
//意见
观点：字符串；
//用特殊等级标记物品
i特殊：布尔值；
//小图像的路径
图像：字符串；
//大图像的路径
imageL：字符串；
}
出口类商品服务{
//basic希望更改此部分，以便它接受restapi，即localhost:3000/api/article或类似的东西
私人物品：第[]条=[
//面包店
{id:'1'，类别id:'1'，标题：'Lion King'，评级：1.5，isSpecial:false，imageL:'http://placehold.it/1110x480“，图片：”http://placehold.it/270x171导演：《迪斯尼的某个家伙》，描述：《这是一部关于会说话的动物的伟大电影》，情节：《迪斯尼情节》，观点：《我最喜欢的电影之一》，制作：《它是怎么制作的》，
{id:'2'，类别id:'1'，标题：'Big Hero 6'，评级：5，isSpecial:false，imageL:'http://placehold.it/1110x480“，图片：”http://placehold.it/270x171描述：'这是一部关于六个孩子和一个胖机器人的电影'，情节：'迪士尼情节'，观点：'2015年我最喜欢的电影'，制作：'它是如何制作的'，
{id:'3'，categoryId:'1'，title:'Lilo and Stitch'，评级：7，isSpecial:false，imageL:'http://placehold.it/1110x480“，图片：”http://placehold.it/270x171，描述：'一部发生在夏威夷的迪斯尼电影'，情节：'迪斯尼情节'，观点：'我最喜欢的迪斯尼电影'，制作：'它是如何制作的'}
];
getArticles（类别？：字符串，搜索？：字符串）{
如果（类别）{
返回this.articles.filter（（article:article，index:number，array:article[]）=>{
return article.categoryId==类别；
});
}else if（搜索）{
让lowSearch=search.toLowerCase（）；
返回this.articles.filter（（article:article，index:number，array:article[]）=>{
return article.title.toLowerCase（）.indexOf（lowSearch）！=-1；
});
}否则{
归还此物品；
}
}
getArticle（id:string）：Article{
for（设i=0；i

如果我理解正确，您希望用后端的文章替换静态文章。如果是这种情况，请尝试以下操作：

private articles: Article[];

getArticles(): Observable<Article[]> {
    const url = `localhost:3000/api/article`;
    return this.http.get(url)
               .map(response => response.json() as Article[] )
               .subscribe(articles => this.articles = articles)
               .catch(this.handleError);
}

私人文章：第[]条；
getArticles（）：可观察{
constURL=`localhost:3000/api/article`；
返回此.http.get（url）
.map（response=>response.json（）作为文章[]）
.subscribe（articles=>this.articles=articles）
.接住（这个.把手错误）；
}

---

这就是说，通常是您的后端过滤或返回id内的特定项目。我不知道您为什么要在前端过滤自己，但您肯定有自己的原因…

谢谢，我只是在angular 2中尝试过滤器，这一部分将要更改。但我是否必须导入观测值才能使其工作？