Question

我具有以下Web组件：

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

现在在另一个Web组件内部，我显示了此标签：

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

}

当我的事件详细信息组件加载时，将从服务器中获取数据，并将响应分配给我的event-schedules-tab组件：

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

现在，由于某些原因，我的问题是由于执行此代码后，event-schedules-tab中的schedules属性始终显示为未定义。

我已经确认服务器已返回正确的响应。

Answer 1

这是因为您在“ EventSchedulesTab”中使用componentDidLoad，但是在使用它时，没有定义“时间表”，则didload方法将执行而没有结果，然后在您更改属性但不执行任何功能（除render外）。您可以使用@Watch安排执行所需功能的时间

或者您也可以根据该属性进行渲染，例如：

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

这将使您的代码对属性更改有反应，因为如果“ schedules”属性更改，则将执行渲染

将数据传递到Web组件

1 个答案: