在浏览器中成功输出值后获取未定义的错误

Question

这是我的第一个角度节点应用程序，当我从 qa.service.ts的 getQuestion 方法中获取值时，我收到错误。 getQuestion 使用问题ID从后端获取数据。

我从后端收到问题，当我尝试在浏览器中打印该值时，我在浏览器中收到了未定义的错误，但也有价值。

qa.service.ts

getQuestion(index){
    return this.http.get('http://localhost:8080/questions/'+index).map(
        res => {
            const question = res.json().question[0];
            let votesUp = question.votes.map(vote => vote.dir == "up");
            let votesDown = question.votes.map(vote => vote.dir == "down");
            let votes = votesUp.length-votesDown.length;
            return new Questions(question._id,question.title,question.description,question.author,votes,question.date,question.answers);           
        }
    );
}

问题-details.component.ts

ngOnInit(){
       this.QA.getQuestion(this.route.snapshot.params['id']).subscribe(
           ques => {
               this.question = ques;
               console.log(this.question);
           }
       );
    }

问题-detail.component.html

<div class="section_detail">
    <div class="section_detail--info">
        <h2>{{question.author.fullname}}</h2>
    </div>
</div>

我在这里做错了什么以及为什么我在浏览器中获得错误和价值？

Answer 1

如果我对问题的解读是正确的，那么您将看到输出到控制台日志的值，但在日志中也会出现空引用错误。这是因为在您的模板中，您访问的是一个未定义的变量，直到服务从您的api获取值。在您的详细信息组件ts文件中，变量问题是未定义的，直到api返回，但是html模板在视图初始化后尝试访问其属性，因此它尝试访问未定义引用的属性，因此出错。要解决这个问题，你只需要在你的模板中放置一个空的守卫，这对于角斗士Elvis操作员来说非常容易：

<h2>{{ question?.author?.fullname }}</h2>

每个项目后面的那些问号告诉angular只是停止尝试，如果引用是“falsey”，null和undefined都是。这将导致在其位置不显示任何内容，就像它是一个空字符串一样，直到该值由服务设置。如果您想要加载值或其他东西，有几种方法可以使用ngIf

来实现