如果 UI 中有任何变化，请更新列表<model> 项

Question

如果不显示完整的概念，这有点难以解释，但我会尝试。我在 Record.razor.cs - this.PersonellData 有 table 名员工。我正在通过这种方法将新员工添加到 table 中：

private void AddNew()
{
  this.PersonellData.Add(new Personell
  {
    Id = i + 1,
    Name = "John " + i,
    From = DateTime.Today + new TimeSpan(8, 30, 0),
    Category = this.selectedCategoryValue,
  });

  this.DiaryRecord.Employees = new List<Personell>(this.PersonellData);

  i++;
}

但是在添加员工后，我想在 UI 中更改类别和（开始）时间。我可以在 UI 中执行此操作，但数据在 List<model> 中本身没有变化。我设置断点在

private async Task OnCreateNewDiaryRecord()
{
  if (true)
  {
    this.DiaryRecordModel = new DiaryRecord
    {
      Id = this.DiaryRecordModel.Id,
      Title = this.DiaryRecordModel.Title,
      Description = this.DiaryRecordModel.Description,
      Employees = this.DiaryRecordModel.Employees,
      Date = this.SelectedDate,
    };

    await OnInitializedAsync();
  }
  isDialogVisible = false;
}

在 Index.razor.cs 中，我在 UI 中没有对列表中的每个员工进行任何更改。任何建议如何让它工作？我应该为每个 UI 项目添加类似 OnChange 的方法，但如何继续更新实际列表？

这里是DiaryRecord.cs:

  public class DiaryRecord
  {
    public Guid Id { get; set; }
    public string Title { get; set; }

    public ICollection<Personell> Employees { get; set; }
  }

这是UI部分列表项

    <Table DataSource="this.PersonellData" RowClassName="@(_=>"editable-row")" Bordered Size=@TableSize.Small>
      <Column Title="From" TData="DateTime">
        <TimePicker TValue="DateTime?" @bind-Value="@context.From" OnChange="this.OnDateValueChanged" />
      </Column>
      <Column Title="Category" DataIndex="@nameof(context.Category)" TData="string">
        <Select DataSource="@this.CategoryList"
                @bind-Value="@this.selectedCategoryValue"
                LabelName="@nameof(Category.CategorySymbol)"
                ValueName="@nameof(Category.CategorySymbol)"
                DefaultActiveFirstItem="false"
                EnableSearch
                OnSelectedItemChanged="this.OnSelectedCategoryChangedHandler">
        </Select>
      </Column>
    </Table>

我试过 OnChange="this.OnDateValueChanged"，但不知道如何继续。

Answer 1

不要从您自己的代码中调用 OnInitializedAsync()。当你这样做时，它不会触发 UI 更新。

//await OnInitializedAsync();
await InvokeAsync(StateHasChanged);  // Invoke probably not needed. Just in case.

如果 UI 中有任何变化，请更新列表<model> 项

Update List<model> items if there are any changes in UI

html

c#

antd

blazor