Чтение данных из файла JSON с несколькими объектами и массивами и отображение в карусели карт под углом 7 - PullRequest
Новая
       18

Чтение данных из файла JSON с несколькими объектами и массивами и отображение в карусели карт под углом 7

0 голосов
/ 01 декабря 2018

Я хочу динамически отображать данные в нескольких каруселях карт (ngx-owl-carousel) в ANGULAR 7 , для этого я пытаюсь прочитать данные из файла JSON, имеющего несколько объектов и массив, и я 'Я использую сервис для достижения этой цели.Но я не понимаю, как динамически отображать данные для нескольких объектов в карточках.Спасибо за помощь.

Код следующий: 

**test.component.html**
<owl-carousel [options]="cardOptions" [items]="cards" [carouselClasses]="['owl-theme', 'sliding','row']">

<div class="recommended item" style="border-radius: 4px;margin-left:2.5%;border-bottom:4px solid #12C079;height:AUTO%" *ngFor="let card of carouselCards;"> 
  <div style="border-radius: 4px;margin-bottom:4%;">
       <img src="assets/ESSENTIALS.png" alt="Avatar" >
    </div>
    <div style="background-color:#fff;padding:101px 5px 5px 5px ;border-radius: 4px">  
          <p style="color:black;font-size:14px"> {{card.title}}</p>
         <p>{{card.description}}</p>
         <img class="banner" src="{{card.image}}" alt="Avatar" style=" ">

   <img class="coin" src="assets/coins.png" alt="Avatar" ><p class="rs"><b>180</b></p>

           </div>
       </div>


**test.component.ts**


import { CardService } from './../card.service';
import { Component, OnInit } from '@angular/core';
import { MatCardModule } from '@angular/material';
import {OwlCarousel} from 'ngx-owl-carousel';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { map } from 'rxjs-compat/operator/map';
import { Subscriber } from 'rxjs';



@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.css']
 })
 export class TestComponent implements OnInit {

 public carouselCards=[];
 cardOptions = {
 items: 4, 
 dots: true, 
 nav: true,
 mouseDrag: true,
 loop: true,
 slideBy: 3
};


constructor(private _card: CardService) { }

ngOnInit() {

  this._card.getCards() // http request
.subscribe(data =>{
  this.carouselCards = data['this.carouselCards'];
  console.log(carouselCards);
}); // observable response




}

} 

**card.service**


import {HttpClient, HttpResponse} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs-compat/operator/map';




@Injectable({
providedIn: 'root'
})
export class CardService {

 private _urlCardFile = 'assets/carousel-cards.json';


constructor( private http: HttpClient) { }

 getCards(): Observable<any>{
    return this.http.get<any>(this._urlCardFile).map(res => res.json());
  }
 }  



JSON FILe:
[
"cards":{ 
    "featured":
    [

        {
            "title" : "card 1",
            "description" :"Facebook has a customer chat widget",
            "image" : "./assets/img/sample.jpg"
        },
        {
            "title" : "card 2",        
            "description" :"this is sample course",
            "image" : "./assets/img/sample.jpg"
        },
        {
            "title" : "card 3",
            "description" :"this is sample course",
            "image" : "./assets/img/sample.jpg"    
        },
        {
            "title" : "card 4",        
            "description" :"this is sample course",
            "image" : "./assets/img/sample.jpg"   
        },
        {
            "title" : "card 5",        
            "description" :"this is sample course",
            "image" : "./assets/img/sample.jpg"   
        },
        {
            "title" : "card 6",        
            "description" :"this is sample course",
            "image" : "./assets/img/sample.jpg"   
        },
        {
            "title" : "card 7",        
            "description" :"this is sample course",
            "image" : "./assets/img/sample.jpg"   
        }

    ],

"explore":
    [  
            {
                "title" : "card 1",
                "image" : "./assets/BIM ESSENTIALS.png"
            },
            {
                "title" : "card 2",        
                "image" : "./assets/sample.png"
            },
            {
                "title" : "card 3",
                "image" : "./assets/sample.png"    
            },
            {
                "title" : "card 4",        
                "image" : "./assets/img.png"   
            },
            {
                "title" : "card 5",        
                "image" : "./assets/img.png"   
            }
    ]







    }
]
...