时间戳

首页 > 解决方案 > 当使用 GET 方法时，数据进入控制台而不是 HTML

html - 当使用 GET 方法时，数据进入控制台而不是 HTML

问题描述

我在里面写了我的get方法ngOnInIt()。当我在控制台中打印数据时，它是可见的，但是当使用插值在 HTML 中打印时，它正在返回[ object object]

{{filteredCourses}} ==> [对象对象]

当我使用 {{course.category|json}} 所以在这里我得到数组的所有值 ["course" : "database" , "category" : "database" , "length" : "2hr" ] 就是这样价值来了

html:-

  <div class="courses" fxLayout="row wrap" fxLayoutAlign="center" [@animateStagger]="{value:'50'}">

                <div class="course" *ngFor="let course of filteredCourses"   fxFlex="100" fxFlex.gt-xs="50"
                     fxFlex.gt-sm="33" [ngClass]="course.category" [@animate]="{value:'*',params:{y:'100%'}}">

                    <div class="course-content" fxLayout="column" fxFlex="1 1 auto">

                        <div class="header" fxLayout="row" fxLayoutAlign="center center"
                             [ngClass]="course.category + '-bg'">

                            <div class="category" fxFlex>
                                {{course.category|json}}
                            </div>
</div>
</div>

代码：filteredCourses：any[];

this.product_name = getProduct()['name'];
console.log(this.product_name);
this.token = getToken();
this.httpHeaders = new HttpHeaders({ "Authorization": "Bearer " + this.token });

this._httpClient.get('http://127.0.0.1:8000/api/products/info/'+this.product_name+'/',{headers: this.httpHeaders})
        .subscribe(
                    data => {
                        this.product = data; 
                        this.courses = data['cources'];
                        this.filteredCourses = this.courses;
                        console.log(this.filteredCourses);
                    },
                    error => {
                       console.log(error);
                    }
                );

标签： htmlangularservice

解决方案

我想filteredCourses 集合包含一个对象数组。因此，您需要使用 ngFor 指令遍历过滤的课程，以在 HTML 模板中呈现数据。

喜欢：

<ul>
  <li ngFor="let item of filteredCourses">{{item.courseName}}</li>
</ul>

推荐阅读