Angular 2 和 Express API 中的路由参数（获取单个帖子）

Question

我正在尝试使用 Angular 2 从 Express API 返回一篇文章。

Express 应用程序有这部分代码用于单个获取请求：

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(article)，它会在终端中返回整个 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

我实际上知道您的错误在哪里..您需要将文章初始化为空对象，因为 angular 可能会在控制台中抛出错误，它无法找到 article.title。错误可能是：找不到未定义的标题。而当 Angular 抛出这样的错误时，整个应用程序都会冻结，而你什么也做不了。所以像这样初始化文章： article: any = {} 会起作用的

另一种选择是在模板中使用“安全运算符”（？），例如 {{article?.title}}。这可以防止错误，所以如果文章未定义，它不会抛出异常，但这不是一个好习惯 rly

第三种选择是在 HTML 上添加 *ngIf，如果文章未定义，则会引发错误。像这样：

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