Angular 2 和 Express API 中的路由参数（Get Single Post）

Question

我正在尝试 return 来自 Express API 的一篇文章，使用 Angular 2.

Express 应用程序有这段代码用于单个 get 请求：

router.get('/articles/:articleId', (req, res) => {

  let articleId = req.params.articleId;

  Article.findById(articleId, (err, article) => {
    if(err) {
        res.send(err);
    } else {
        res.json(article)
    }
  });

});

如果我这样做 console.log（文章），它 return 是终端中的整个 JSON 对象，所以它可以工作。

接下来，文章服务如下所示：

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ArticleService {

  constructor( private http:Http ) { 
    console.log('Article service initialized...')
  }

  getArticles() {

  }

  getArticle(id) {
    return this.http.get('http://localhost:3000/api/articles/'+id)
      .map(res => res.json());
  }

  addArticle(newArticle){

  }

  deleteArticle(id){
    return this.http.delete('http://localhost:3000/api/articles/'+id)
        .map(res => res.json());
  }

}

使用上面的代码 deleteArticle(id) 有效。

最后，ArticleDetailComponent 如下所示：

import { Component, OnInit } from '@angular/core';
import { ArticleService } from '../services/article.service'; 
import { Router, ActivatedRoute, Params } from '@angular/router';
import { ArticleComponent } from '../article/article.component'
import 'rxjs/add/operator/switchMap';

@Component({
      selector: 'app-articledetail',
      templateUrl: './articledetail.component.html',
      styleUrls: ['./articledetail.component.css']
})

export class ArticleDetailComponent implements OnInit {

      article: ArticleComponent;
      title: string;
      text: string;

      constructor( 
        private router: Router,
        private route: ActivatedRoute, 
        private articleService:ArticleService){   

        }

        ngOnInit() {
            var id = this.route.params.subscribe(params => {
                var id = params['id'];

                this.articleService.getArticle(id)
                    .subscribe(article => {this.article = article});

                    console.log(id) //returns article id correctly
            });

        }
}

articledetail.component.html 看起来像这样：

    <div class="article-container">
        <div class="col-md-12">
            <h2>{{article.title}}</h2>
            {{article.text}}
            <br><br>
        </div>
    </div>

当我运行应用程序时，我可以获取文章列表并按 Id 删除文章，但我无法在 ArticleDetailComponent 中显示单个文章。

如果我在 ArticleDetailComponent 中执行 console.log(id) 它会显示文章 ID，但我无法在响应中获取 JSON 对象并将其显示在 HTML.

有人可以告诉我缺少什么吗？

谢谢

Answer 1

我真的明白你的错误在哪里..你需要将文章初始化为空 object，因为 angular 可能会在控制台中抛出它找不到 article.title 的错误。错误可能是：找不到未定义的标题。当 angular 抛出这样的错误时，整个应用程序就会冻结，您将无能为力。所以像这样初始化文章： article: any = {} 它会起作用

另一种选择是在模板中使用 "safe operator" (?) {{article?.title}}。这可以防止错误，所以如果文章未定义，它不会抛出异常，但这不是一个好的做法 rly

第三种选择是在 HTML 上添加 *ngIf，如果 article 未定义则抛出错误。像这样：

 <div class="article-container" *ngIf="article">
        <div class="col-md-12">
            <h2>{{article.title}}</h2>
            {{article.text}}
            <br><br>
        </div>
 </div>

Angular 2 和 Express API 中的路由参数（Get Single Post）

Route Parameters in Angular 2 and Express API (Get Single Post)

api

rest

express

mean-stack

angular