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

我试图使用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());
  }

}

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

        }
}

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

使用上面的代码，deleteArticle（id）可以工作

最后，ArticleDetailComponent如下所示：

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

}

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

        }
}

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

articledetail.component.html如下所示：

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

}

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

        }
}

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

{{文章标题}
{{article.text}

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

如果我在ArticleDetailComponent中使用console.log（id），它会显示文章id，但我无法在响应中获取JSON对象并在HTML中显示它

谁能告诉我少了什么

---

谢谢

我真的知道你错在哪里了。。您需要将文章初始化为空对象，因为angular可能在控制台中抛出了无法找到的错误

article.title

。错误可能是：找不到未定义的标题。当angular抛出这样一个错误时，整个应用程序都冻结了，你什么也做不了。所以像这样初始化文章：

article:any={}

它会工作的

另一种选择是在模板中使用“安全运算符”（？），如

{{article？.title}}

。这可以防止错误，所以如果文章未定义，它不会抛出异常，但这不是一个好的做法

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

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

{{文章标题}
{{article.text}

我们可以查看

articledeail.component.html

文件吗？此外，如果您打开

http://localhost:3000/api/articles/11

在浏览器中，您看到对象了吗？是的，Denko，当我在浏览器中打开时，它会显示JSON对象。谢谢你在

{this.article=article}

中尝试console.log（article）谢谢Denko！那是个错误，现在已经修好了。是的，控制台抛出错误：./ArticleDetailComponent类ArticleDetailComponent-内联模板中的错误：2:12原因：无法读取未定义的属性“title”。感谢您澄清DenkoI很高兴我能提供帮助：）如果有帮助，您可以接受答案