при использовании метода GET данные поступают в консоль не в HTML

Question

Я написал свой метод get внутри ngOnInIt(). Когда я печатаю данные в консоли, они видны, но при печати в HTML с использованием интерполяции он возвращает [ object object]

{{FilterCourses}} ==> [объект объекта]

и когда я использую {{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>

Код: FilterCourses: любой [];

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

Answer 1

Вам необходимо использовать l oop, если это массив объектов или вы можете распечатать свойства объекта по отдельности.

Но если вы хотите увидеть объект filteredCourses в шаблоне, используйте json pipe.

{{filteredCourses | json}}

Если вам нужна помощь для печати значений с использованием * ngFor или свойств, выполните дайте нам знать.

Answer 2

Полагаю, что коллекция FilterCourses содержит массив объектов. Поэтому вам нужно перебирать фильтрованные ресурсы с помощью директивы ngFor для отображения данных в шаблоне HTML.

Как:

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

Answer 3

попробуйте использовать JSON.stringify(yourObject) или, возможно, в некоторых случаях вы можете использовать Object.keys().