Передача данных в веб-компонент - PullRequest
Новая
       32

Передача данных в веб-компонент

0 голосов
/ 15 октября 2019

У меня есть следующий веб-компонент: 

import { Component, h, Element, Prop } from '@stencil/core';
import { Schedule } from '../../interfaces/schedule';

@Component({
    tag: 'event-schedules-tab',
    styleUrl: 'event-schedules-tab.css'
})
export class EventSchedulesTab {
    /**
       * The first name
       */
    @Prop() schedules: Schedule[];
    @Element() element: HTMLElement;

    componentDidLoad() {
        this.displayTickets();
    }

    displayTickets() {
        if (this.schedules !== undefined) {
            let divSchedules: HTMLDivElement = this.element.querySelector("#schedules");
            for (let i = 0; i < this.schedules.length; i++) {
                let eventSchedule = document.createElement("event-schedule");
                eventSchedule.schedule = this.schedules[i];
                divSchedules.appendChild(eventSchedule);
            }
            console.log("schedules is defined");
        }

        console.log("display schedules");
    }

    render() {
        return [
            <div id="schedules" class="bg-gray-100"></div>
        ];
    }
}

Теперь внутри другого веб-компонента у меня отображается этот тег: 

import { Component, h, Prop, Element } from '@stencil/core';
import { EventItem } from '../../interfaces/event-item';
import { Event } from '../../services/event'

@Component({
    tag: 'event-details',
    styleUrl: 'event-details.css'
})
export class EventDetails {
    /**
        * The first name
        */
    @Prop() slug: string;
    @Element() element: HTMLElement;
    private eventsService: Event = new Event();

    componentDidLoad() {

        this.displayEvent();

    }

    async displayEvent() {
        if (this.slug !== undefined) {
            this.eventsService.fetchTickets(this.slug).then(async (response) => {
                let event: EventItem = await response.json();

                let thumbnail: HTMLElement = this.element.querySelector(".modal .thumbnail");
                thumbnail.setAttribute("src", event.banners[0]);

                let category: HTMLElement = this.element.querySelector(".modal .category");
                category.innerText = event.category;

                let title: HTMLElement = this.element.querySelector(".modal .title");
                title.innerText = event.name;

                let description: HTMLElement = this.element.querySelector(".modal .description");
                description.innerText = event.description;

                let eventSchedulesTab: HTMLEventSchedulesTabElement = this.element.querySelector("event-schedules-tab");
                eventSchedulesTab.schedules = event.schedules;

                let eventSummaryTab = this.element.querySelector("event-summary-tab");
                eventSummaryTab.summary = event.description;

                //console.log(event);
            }, (error) => {
                console.log(error);
            })
        }
    }

    render() {
        return [
            <div class="flex flex-col">
                <event-schedules-tab></event-schedules-tab>
                <event-summary-tab></event-summary-tab>
            </div>
        ];
    }

}

Когда загружается мой компонент сведений о событии, данныеизвлекается с моего сервера, и ответ назначается моему компоненту табуляции событий: 

let eventSchedulesTab: HTMLEventSchedulesTabElement = this.element.querySelector("event-schedules-tab");
eventSchedulesTab.schedules = event.schedules;

Теперь по какой-то причине моя проблема возникает после того, как этот код будет выполнен, свойство schedules на моей вкладке событий-расписаний всегдаотображается как неопределенное.

Я подтвердил, что с сервера возвращается правильный ответ.

1 Ответ

2 голосов
/ 15 октября 2019

Это потому, что вы используете componentDidLoad в "EventSchedulesTab", но когда вы используете его, не определено никаких "расписаний", тогда метод didload выполняется без результата, затем, когда вы изменяете свойство, но никакая функция не выполняется, кроме render. Вы можете использовать @Watch для планирования выполнения желаемой функции

Или также вы можете сделать рендер в зависимости от этого свойства, например: 

render() {
  return (<div id="schedules" class="bg-gray-100">{this.schedules.map((s) => <event-schedule schedule={s}></event-schedule>)}</div>)
}

Это сделает ваш код реагирующим на изменение свойства, потому что еслисвойство "расписаний" изменится, рендеринг будет выполнен

...