Question

我对Blazor的模板化组件感到陌生，我正在寻找指导。

我有两个组件，一个称为DataTable，一个称为DataModal。两者都使用通用的TItem作为类型参数，以使用渲染片段进行标记来渲染项目表。

DataTable呈现表HTML，而DataModal是一个引导模式包装器，其中包含DataTable组件作为子组件。这个想法是显示一个带有数据表的模式对话框，供用户选择。

当DataTable组件单独用作页面组件的一部分时，它可以正常工作。使用DataModal组件时，传递相同的项目集合（如TItem）和相同的渲染片段标记，但我在DataTable中没有得到正确的内容。相反，我得到了相同数量的项目的片段和TItem程序集名称。

这是页面上嵌入的数据表组件的标记：

key

这将正确输出，渲染片段中的每个属性都正确显示为表中的元素。

当我对页面内的DataModal组件执行相同操作时，会出现问题：

$oFile = simplexml_load_file("test.xml");

foreach($oFile->xpath("index") as $key => $value) {
        echo "{$key}: {$value->value}<br>";
}

DataModal组件标记如下：

<DataTable TItem="TicketSummaryModel" PageNumberChanged="OnPageChanged" Class="table table-hover table-striped dataTable responsive no-footer" RowClicked="@OnRowClicked" Items="SearchedTickets.Data"
                                   TotalRecords="@SearchedTickets.RecordsTotal" TotalPages="SearchedTickets.PagesTotal">
   <DataTableHeader>
       <th>Ticket Number</th>
       <th>Updated On</th>
       <th>Title</th>
       <th>Created By</th>
       <th>Category</th>
       <th>Status</th>
   </DataTableHeader>
   <DataRowTemplate>
       <td><i class="fas fa-circle mr-1 @context.PriorityClass"></i> @context.TicketNumber</td>
       <td>@context.UpdatedOn</td>
       <td>@context.Title</td>
       <td>@context.CreatedByUser</td>
       <td>@context.Category</td>
       <td><i class="fas fa-square mr-1 @context.StatusClass"></i> @context.Status</td>
    </DataRowTemplate>

该模式显示一个表，该表头在DataTableHeader呈现片段中正确，并且项数据的行数正确。问题在于，DataRowTemplate渲染片段的输出现在只是程序集名称：

<DataModal @ref="modalRef" TitleClass="bg-primary" ModalSize="ModalSize.ExtraLarge" Title="Test Modal" Items="@SearchedTickets.Data"
                   TitleIcon="fa-check" TItem="TicketSummaryModel" TableClass="table table-hover table-striped dataTable responsive no-footer"
                   TotalRecords="@SearchedTickets.RecordsTotal" TotalPages="SearchedTickets.PagesTotal">
            <DataTableHeader>
                <th>Ticket Number</th>
                <th>Updated On</th>
                <th>Title</th>
                <th>Created By</th>
                <th>Category</th>
                <th>Status</th>
            </DataTableHeader>
            <DataRowTemplate>
                <td><i class="fas fa-circle mr-1 @context.PriorityClass"></i> @context.TicketNumber</td>
                <td>@context.UpdatedOn</td>
                <td>@context.Title</td>
                <td>@context.CreatedByUser</td>
                <td>@context.Category</td>
                <td><i class="fas fa-square mr-1 @context.StatusClass"></i> @context.Status</td>
            </DataRowTemplate>
</DataModal>

知道为什么会这样吗？ DataModal和DataTable都使用完全相同的声明来显示要显示的项目：

@inherits DataModalBase<TItem>
@typeparam TItem

<Modal @ref="@ModalRef">
        <ModalContent Size="@ModalSize" IsCentered="true">
            <ModalHeader Class="@TitleClass">
                <ModalTitle>
                    @if (Title != null)
                    {
                        @if (TitleIcon != null)
                        {
                            <i class="@("fal " + TitleIcon) mr-2"></i>
                        }
                        @Title
                    }
                </ModalTitle>
                <CloseButton Clicked="Close" />
            </ModalHeader>
            <ModalBody>
                @if (Items != null)
                {
                    <DataTable TItem="TItem" Class="@TableClass" Items="@Items">
                        <DataTableHeader>
                            @DataTableHeader
                        </DataTableHeader>
                        <DataRowTemplate>
                            @DataRowTemplate
                        </DataRowTemplate>
                    </DataTable>
                }
                else
                {
                    <div class="mr-auto ml-auto mt-4 mb-4">
                        <div class="lds-hourglass"></div>
                    </div>
                }
            </ModalBody>
        </ModalContent>
</Modal>

DataTable使用以下代码呈现DataRowTemplate，当在父级之外而不是子级（在DataModal内）使用DataTable时，该代码又可以工作：

Microsoft.AspNetCore.Components.RenderFragment`1[MyProject.Models.Tickets.TicketSummaryModel]
Microsoft.AspNetCore.Components.RenderFragment`1[MyProject.Models.Tickets.TicketSummaryModel]
Microsoft.AspNetCore.Components.RenderFragment`1[MyProject.Models.Tickets.TicketSummaryModel]
Microsoft.AspNetCore.Components.RenderFragment`1[MyProject.Models.Tickets.TicketSummaryModel]
...

如果您需要更多信息来解决此问题，请告诉我。

Blazor子组件模板化/渲染片段问题

0 个答案: