Угол 6: Как отобразить 2-х мерный массив

Question

Это данные моего массива, которые я получаю от службы:

Как я могу использовать этот массив на моем компоненте

      <div *ngFor="let i of service$">

        <div class="row">
                <div class="col-lg-4" *ngFor="let j of i">
                    {{j.title}}

                </div>  
        </div>

      </div>

Мой component.ts, я вызываю getService () в моем конструкторе.

 service$: any;
 getService() {
this.serviceService.get_service()
  .pipe(first())
  .subscribe(
      data => {

         this.service$ = data;

         console.log(this.service$);

      },
      error => {
          this.error = error;

      });

}

Answer 1

Ваш сервисный звонок должен выглядеть как

service$: any;

ngOnInit(){
    this.service$ =  this.serviceService.get_service().pipe(
        catchError(error => this.error = error)
    );
}  

Answer 2

Я полагаю, у вас есть некоторые проблемы с TS.Прежде всего определите переменную, например:

 service$: any[] = [];

Затем удалите pipe () и используйте следующий код:

getService() {
  this.serviceService.get_service()
  .subscribe(
      data => {
         this.service$ = data;
         console.log(this.service$);
      },
      error => {
          this.error = error;

      });
}

Я надеюсь, что вы возвращаете get_service () что-то вроде этого:

return this.http.get('YOUR_URL')
      .map((response) => response.json());

Ваш HTML выглядит хорошо для меня.

Answer 3

Использовать асинхронный канал, который отображает данные, поступающие из API.

<div *ngFor="let i of service$ | async">

        <div class="row">
                <div class="col-lg-4" *ngFor="let j of i">
                    {{j.title}}

                </div>  
        </div>

      </div>