Blazor TypeError： 无法读取 Object.e 上的 null 属性'removeChild' [作为 removeLogicalChild]

Question

我为双列表框创建了一个组件。一切都很好，但是当我提交时，我收到一个错误。

<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>

DualListbox剃刀代码：

@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>
}

*DualListbox代码隐藏 *：

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

[2020-02-12T07：42：28.867Z] 错误：应用批处理 7 时出错。 e.log @ blazor.server.js：15 blazor.server.js：8 uncatch (in promise(

类型错误： 无法读取 null 的属性"insertBefore" at Object.s [as insertLogicalChild] (blazor.server.js：8( at e.insertText (blazor.server.js：8( at e.insertFrame (blazor.server.js：8( at e.applyEdits (blazor.server.js：8( at e.updateComponent (blazor.server.js：8( at Object.t.renderBatch (blazor.server.js：1( at e. (blazor.server.js：15( at blazor.server.js：15 at Object.next (blazor.server.js：15( at blazor.server.js：15 blazor.server.js：15 [2020-02-12T07：42：28.926Z] 错误：系统聚合异常：一个或 发生了更多错误。(类型错误：无法读取属性"insertBefore" 的空( --->系统无效操作异常： 类型错误： 不能 读取空值的属性"插入之前" Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask， Int32[] updateComponents( --- 内部结束 异常堆栈跟踪---

Answer 1

我的问题也出在FontAwesome上。就我而言，将图标放入其中<span></span>解决问题。

@if (conditional)
{
<span>
<i class="fas fa-check"></i>
</span>
}
else
{
<span>
<i class="fas fa-times"></i>
</span>
}

Answer 2

所以，这可能不是你的确切答案，但它可能会为偶然发现这个SO问题的人提供线索。 就我而言，这是在按钮文本中换出字体真棒图标的结果，而不是使用两个单独的按钮。

这可能是相关的，因为您将 JSRuntime 与"报告"结合使用。IsChecked = 1;" 语法，我假设它正在更改 Blazor Server 尝试(但无法(跟踪的 UI 元素状态客户端。

当我在单个按钮中使用条件逻辑来换出图标时，我收到错误"blazaor 类型错误：无法读取 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>
}

Answer 3

在我的情况下，同样的错误是由我使用包含MatBlazor组件和/或FontAwesome图标的Bootstrap Dismissible Alerts引起的。

将警报放在另一个<div></div>中解决了此问题。 将图标/组件放置在<span></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">&times;</span>
</button>
</div>
</div>