如何解决类型错误：无法在使用 Jquery 数据表的 blazor clinet 应用程序中读取 null 的属性“removeChild”
我在 blazor 客户端应用程序上使用 jquery 数据表。在剃刀组件中，我有一个表单来收集用户输入并从服务器获取数据。然后我用传入的数据填充 html 表并在其上调用 Jquery DataTable。只要行数相同，它就可以正常工作，但是当行数减少时，我会得到以下异常 -
Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot read property 'removeChild' of null
TypeError: Cannot read property 'removeChild' of null
下面是我的剃须刀组件 -
@page "/internalhealthreport"
@using BMI.SWV.Reporting.Shared;
@using Microsoft.Extensions.Configuration;
@inject HttpClient HttpClient
@inject IJSRuntime JSRuntime
@inject SpinnerService SpinnerService
@inject IConfiguration Configuration
@*@implements Idisposable*@
<body>
<h1 class="mb-5">INTERNAL HEALTH REPORT</h1>
<hr />
<EditForm Model="@this.HealthReportArgs" OnValidSubmit="@HandleValidSubmit" style="width:fit-content">
<div class="container">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="row">
<div class="col-sm">
<div class="form-group">
<label for="txtAccountNo">Account Number</label>
<input type="text" class="form-control" name="accountNumber" placeholder="923935" @bind-value="this.HealthReportArgs.accountNumber">
</div>
</div>
<div class="col-sm">
<div class="form-group">
<label for="txtIpiBaseNumber">IPI Base Number</label>
<input type="text" class="form-control" name="ipiBaseNumber" placeholder="I-002184856-4" @bind-value="this.HealthReportArgs.ipiBaseNumber">
</div>
</div>
<div class="col-sm">
<div class="form-group">
<label for="txtIpiNameNumber">IPI Name Number</label>
<input type="text" class="form-control" name="ipiNameNumber" placeholder="00454808047" @bind-value="this.HealthReportArgs.ipiNameNumber">
</div>
</div>
<div class="col-sm">
<div class="form-group">
<label for="txtTaxId">Tax Id</label>
<input type="text" class="form-control" name="taxIdKey" placeholder="211700435" @bind-value="this.HealthReportArgs.taxIdKey">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="form-group">
<input type="submit" class="btn btn-primary btn-lg btn-block" value="Search">
</div>
</div>
</div>
</div>
</EditForm>
<hr />
@if (this.HealthReportRows.Count() > 0)
{
<div class="row">
<div class="results-table" style="overflow-x: auto;">
<table id="resultsTable" class="table table-bordered table-striped table-sm" style="font-size:smaller;white-space:Nowrap">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Title Name</th>
<th>Account #</th>
<th>AKA Seq #</th>
<th>IPI Base #</th>
<th>IPI Name #</th>
<th>Title #</th>
<th>Title ID</th>
<th>Sender #</th>
<th>Sender Name</th>
<th>ISWC</th>
<th>SWV Status</th>
<th>SWV Status Reason</th>
<th>P/W Ind</th>
<th>Pay Mode</th>
<th>Share</th>
</tr>
</thead>
<tbody>
@foreach (var healthReportRow in this.HealthReportRows)
{
<tr>
<td>@healthReportRow.Name</td>
<td>@healthReportRow.TitleName</td>
<td>@healthReportRow.AccountNumber</td>
<td>@healthReportRow.AKASeqNumber</td>
<td>@healthReportRow.IPIBaseNumber</td>
<td>@healthReportRow.IPINameNumber</td>
<td>@healthReportRow.TitleNumber</td>
<td>@healthReportRow.TitleID</td>
<td>@healthReportRow.SenderNo</td>
<td>@healthReportRow.OriginalSubmitterName</td>
<td>@healthReportRow.ISWC</td>
<td>@healthReportRow.songViewStatus</td>
<td>@healthReportRow.songViewReason</td>
<td>@healthReportRow.PublisherWriterIndicator</td>
<td>@healthReportRow.PayMode</td>
<td>@healthReportRow.Share</td>
</tr>
}
</tbody>
</table>
</div>
</div>
}
</body>
@code {
public HealthReportArgs HealthReportArgs { get; set; } = new HealthReportArgs() { };
public HealthReportRow[] HealthReportRows { get; set; } = new HealthReportRow[] { };
public async void HandleValidSubmit()
{
SpinnerService.Show();
var settings = new Settings(Configuration);
if (string.IsNullOrWhiteSpace(settings.HealthReportApiUrl))
{
throw new Exception($"Configuration value missing: {nameof(settings.HealthReportApiUrl)}");
}
this.HealthReportRows = await HttpClient.GetReportRows<HealthReportRow>(apiUrl: settings.HealthReportApiUrl,args: this.HealthReportArgs);
await JSRuntime.InvokeAsync<object>("TestDataTablesRemove","#resultsTable");
await JSRuntime.InvokeAsync<object>("InitDataTable","#resultsTable");
this.StateHasChanged();
SpinnerService.Hide();
}
}
这里是 index.html 中的脚本 -
function InitDataTable(table) {
$(document).ready(function () {
if (!$.fn.DataTable.isDataTable('#resultsTable')) {
$(table).DataTable({
dom: 'Bfrtip',buttons: [
'copy','csv','excel','pdf','print'
]
});
}
});
}
function TestDataTablesRemove(table) {
$(document).ready(function () {
if ($.fn.DataTable.isDataTable('#resultsTable')) {
$('#resultsTable').DataTable().destroy(true);
}
});
}
解决方法
我猜您必须在单击按钮时清除表格。请试试这个 -
@code {
public HealthReportArgs HealthReportArgs { get; set; } = new HealthReportArgs() { };
public HealthReportRow[] HealthReportRows { get; set; } = new HealthReportRow[] { };
public async void HandleValidSubmit()
{
SpinnerService.Show();
await JSRuntime.InvokeAsync<object>("TestDataTablesRemove","#resultsTable");
SpinnerService.Show();
var settings = new Settings(Configuration);
if (string.IsNullOrWhiteSpace(settings.HealthReportApiUrl))
{
throw new Exception($"Configuration value missing: {nameof(settings.HealthReportApiUrl)}");
}
this.HealthReportRows = await HttpClient.GetReportRows<HealthReportRow>(apiUrl: settings.HealthReportApiUrl,args: this.HealthReportArgs);
this.StateHasChanged();
await JSRuntime.InvokeAsync<object>("InitDataTable","#resultsTable");
SpinnerService.Hide();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<object>("InitDataTable","#resultsTable");
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
