Angular - Owl Slider не работает должным образом при загрузке данных - PullRequest
Новая
       59

Angular - Owl Slider не работает должным образом при загрузке данных

0 голосов
/ 08 марта 2019

Когда я ставлю статические данные для галереи, все работает нормально. Вот код:

TS: 

export class ObservacoesComponent implements OnInit {

constructor() { }

mySlideTexts = ["DATA1", "DATA2", "DATA3", "DATA4", "DATA5"];
mySlideOptionsText = { items: 3, dots: false, nav: false };

ngOnInit() {}

}

HTML: 

<owl-carousel [options]="mySlideOptionsText" [items]="texts" [carouselClasses]="['owl-theme', 'sliding']">
    <div class="item mx-2" *ngFor="let text of mySlideTexts;let i = index">
        <p style="padding:10px; margin: 5px;">{{text}}</p>
        <p>18/06/2018</p>
    </div>
</owl-carousel>

enter image description here

Но тогда, когда я пытаюсь загрузить реальные данные, вот что происходит:

enter image description here

Галерея больше не галерея. Теперь элементы следуют вертикальной ориентации, и прокрутки нет, как раньше. Вот новый .ts код: 

export class ObservacoesComponent implements OnInit {

    token : any;
    woundId : any;
    wound : Wound;
    interventions : Array<Intervention>;

    constructor(private route: ActivatedRoute, private chartsReportService : ChartsReportService ) {  

        this.woundId = this.route.snapshot.paramMap.get('woundId');       
        this.token = this.route.snapshot.paramMap.get('token');

    }

    mySlideTexts = [];
    mySlideOptionsTextTratamentos = {};

    ngOnInit() {
        this.woundId = this.route.snapshot.paramMap.get('woundId');       
        this.token =this.route.snapshot.paramMap.get('token');
        this.getWoundById() 
    }

    getWoundById() {    
    this.chartsReportService.getWoundById(this.woundId, this.token).subscribe((v) => {
    this.wound = v.result;
    this.interventions = v.result.intervention;

    //ver como fica esta informação
    for(let interv of this.interventions)
    {
        this.mySlideTexts.push(interv.observations);
    }
    });

  }
}

Знаете ли вы, где может быть проблема? Спасибо.

...