C# Blazor TypeError:无法读取属性'；removeChild'；对象.e处的null值[作为RemovelogicChild]
我为双列表框创建了一个组件，一切都很好，但当我提交时出现错误C# Blazor TypeError:无法读取属性'；removeChild'；对象.e处的null值[作为RemovelogicChild],c#,blazor,blazor-server-side,C#,Blazor,Blazor Server Side,我为双列表框创建了一个组件，一切都很好，但当我提交时出现错误 <EditForm Model="Model.Report" class="kt-form" OnValidSubmit="Model.OnSearch"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Edit Column
<EditForm Model="Model.Report" class="kt-form" OnValidSubmit="Model.OnSearch">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Columns</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<Project.Components.DualListbox ReportColumns="Model.Report.ReportColumns" Id="ReportColumns" @bind-Value="@Model.Report.ReportColumns"></Project.Components.DualListbox>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" @onclick="Model.OnCloseModal"><i class="la la-close"></i> Close</button>
<button type="submit" class="btn btn-primary btn-sm"><i class="la la-exchange"></i> Change</button>
</div>
</EditForm>
编辑列
接近
改变
@typeparam TValue
@inherits InputBase<TValue>
@if (ReportColumns != null)
{
<select id="@Id" class="kt-dual-listbox" multiple>
@foreach (var column in ReportColumns.OrderBy(c => c.Sort))
{
if (column.IsChecked == 1)
{
<option value="@column.Id" selected>@column.Title</option>
}
else
{
<option value="@column.Id">@column.Title</option>
}
}
</select>
}
@typeparam TValue
@继承InputBase
@如果（ReportColumns！=null）
{
@foreach（ReportColumns.OrderBy中的var列（c=>c.Sort））
{
如果（column.IsChecked==1）
{
@栏目名称
}
其他的
{
@栏目名称
}
}
}
using Project.Models;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.JSInterop;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Threading.Tasks;
namespace Project.Components
{
public partial class DualListbox<TValue> : InputBase<TValue>
{
[Parameter] public string Id { get; set; }
[Inject] IJSRuntime JSRuntime { get; set; }
[Parameter] public ICollection<ReportColumn> ReportColumns { get; set; }
public DotNetObjectReference<DualListbox<TValue>> DotNetRef;
[Parameter] public EventCallback<object> OnChanged { get; set; }
protected override bool TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)
{
try
{
if (value == "null")
{
value = null;
}
if (typeof(TValue) == typeof(string))
{
result = (TValue)(object)value;
validationErrorMessage = null;
return true;
}
else if (typeof(TValue) == typeof(int) || typeof(TValue) == typeof(int?))
{
int.TryParse(value, NumberStyles.Integer, CultureInfo.InvariantCulture, out var parsedValue);
result = (TValue)(object)parsedValue;
validationErrorMessage = null;
return true;
}
throw new InvalidOperationException($"{GetType()} does not support the type '{typeof(TValue)}'.");
}
catch (Exception ex)
{
throw ex;
}
}
protected override void OnInitialized()
{
base.OnInitialized();
DotNetRef = DotNetObjectReference.Create(this);
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("dualListboxComponent.init", Id, DotNetRef, "Change_SelectWithFilterBase");
}
}
[JSInvokable("Change_SelectWithFilterBase")]
public void Change(string value)
{
try
{
if (value == "null")
{
value = null;
}
var array = value.Split("#");
if (array[0] == "add")
{
int _value = int.Parse(array[1]);
var report = ReportColumns.Where(c => c.Id == _value).FirstOrDefault();
report.IsChecked = 1;
}
else
{
int _value = int.Parse(array[1]);
var report = ReportColumns.Where(c => c.Id == _value).FirstOrDefault();
report.IsChecked = 0;
}
}
catch (Exception ex)
{
throw ex;
}
if (OnChanged.HasDelegate)
OnChanged.InvokeAsync(value);
}
}
}
使用Project.Models；
使用Microsoft.AspNetCore.Components；
使用Microsoft.AspNetCore.Components.Forms；
使用Microsoft.JSInterop；
使用制度；
使用System.Collections.Generic；
利用制度全球化；
使用System.Linq；
使用System.Threading.Tasks；
名称空间项目.组件
{
公共部分类DualListbox:InputBase
{
[参数]公共字符串Id{get；set；}
[Inject]IJSRuntime JSRuntime{get；set；}
[参数]公共ICollection ReportColumns{get；set；}
公共DotNetObjectReference DotNetRef；
[参数]public EventCallback OnChanged{get；set；}
受保护的重写bool TryParseValueFromString（字符串值、输出TValue结果、输出字符串验证错误消息）
{
尝试
{
如果（值=“空”）
{
值=空；
}
if（typeof（TValue）=typeof（string））
{
结果=（TValue）（object）值；
validationErrorMessage=null；
返回true；
}
否则如果（typeof（TValue）==typeof（int）| | typeof（TValue）==typeof（int？）
{
int.TryParse（值，NumberStyles.Integer，CultureInfo.InvariantCulture，out var parsedValue）；
结果=（TValue）（object）parsedValue；
validationErrorMessage=null；
返回true；
}
抛出新的InvalidOperationException（$“{GetType（）}不支持类型“{typeof（TValue）}.”）；
}
捕获（例外情况除外）
{
掷骰子；
}
}
受保护的覆盖无效OnInitialized（）
{
base.OnInitialized（）；
DotNetRef=DotNetObjectReference.Create（此）；
}
AfterRenderAsync（bool firstRender）上受保护的重写异步任务
{
等待base.OnAfterRenderAsync（firstRender）；
if（firstRender）
{
等待JSRuntime.InvokeVoidAsync（“dualListboxComponent.init”，Id，DotNetRef，“Change_SelectWithFilterBase”）；
}
}
[JSInvokable（“Change\u SelectWithFilterBase”）]
公共无效更改（字符串值）
{
尝试
{
如果（值=“空”）
{
值=空；
}
var数组=value.Split（“#”）；
if（数组[0]=“添加”）
{
int _value=int.Parse（数组[1]）；
var report=ReportColumns.Where（c=>c.Id==\u值）.FirstOrDefault（）；
report.IsChecked=1；
}
其他的
{
int _value=int.Parse（数组[1]）；
var report=ReportColumns.Where（c=>c.Id==\u值）.FirstOrDefault（）；
report.IsChecked=0；
}
}
捕获（例外情况除外）
{
掷骰子；
}
if（OnChanged.HasDelegate）
OnChanged.InvokeAsync（值）；
}
}
}
所以，这可能不是你确切的答案，但它可能会给偶然发现这个问题的人一个线索。在我的例子中，这是因为在按钮文本中替换了一个字体很棒的图标，而不是使用两个单独的按钮 这可能是相关的，因为您将JSRuntime与“report.IsChecked=1；”语法结合使用，我假设它正在更改Blazor服务器试图（但无法）跟踪的UI元素状态客户端 当我在单个按钮中使用条件逻辑替换图标时，收到一个错误，“blazor TypeError:无法读取null的属性'removeChild'
@if (AllowAllPartners)
{
<button @onclick="(() => AllowAllPartnersToggle())">
<i class="far fa-check-square"></i>
</button>
}
else
{
<button @onclick="(() => AllowAllPartnersToggle())">
<i class="far fa-square"></i>
</button>
}
@if (conditional)
{
<span>
<i class="fas fa-check"></i>
</span>
}
else
{
<span>
<i class="fas fa-times"></i>
</span>
}
<div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Warning Text <MatTooltip Tooltip="Tooltip text" Context="_context1" Wrap="true" Position="@MatTooltipPosition.Top"><i class="far fa-question-circle"></i></MatTooltip>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>