将 model 中的空数据提供给组件

Question

我有两个这样的组件：

<div class="col">
  <p>To Do</p>
  <Dropzone Items="MyFirstList" Class="h-100">
      <ChildContent>
          <div class="card" style="border-left: 3px solid black">
              <div class="card-body">
                  <h6>@context.Title</h6>                    
              </div>
          </div>
      </ChildContent>
  </Dropzone>
</div>
<div class="col">
  <p>In Progress</p>
  <Dropzone Items="MyThirdList" Class="h-100">
      <ChildContent>
          <div class="card" style="border-left: 3px solid orange">
              <div class="card-body">
                  <h6>@context.Title</h6>
              </div>
          </div>
      </ChildContent>
  </Dropzone>
</div>

这两个组件分别获取这些数据：

public List<TodoItem> MyFirstList = new List<TodoItem>()
{
  new TodoItem(){Title = "Item 1"},
  new TodoItem(){Title = "Item 2"},
  new TodoItem(){Title = "Item 3"},
  new TodoItem(){Title = "Item 4"},
  new TodoItem(){Title = "Item 5"},
  new TodoItem(){Title = "Item 6"},
  new TodoItem(){Title = "Item 7"},
};
  
public List<TodoItem> MyThirdList = new List<TodoItem>()
{

};

现在我上面提供的代码没有问题（代码来自https://github.com/Postlagerkarte/blazor-dragdrop ）它是一个拖放 function 完美运行您将项目从 MyFirstList 组件拖到 MyThirdList。

由于它有效，我想摆脱虚拟数据并将其替换为我自己的数据 model，这是第一个组件的数据：

protected override async Task OnInitializedAsync()
{
  await this.GetTestSuites();
}

TestSuiteModel MyFirstList;
protected async Task GetTestSuites()
{
  // url = ... 
  MyFirstList = await TestSuiteService.GetTestSuites(url);
  await base.OnInitializedAsync();
}

组件为：

<Dropzone Items="MyFirstList.value" Class="h-100">
  <ChildContent>
      <div class="card" style="border-left: 3px solid black">
          <div class="card-body">
              <h6>@context.id</h6>
         </div>
      </div>
  </ChildContent>
</Dropzone>

所以上面的工作完美但我需要我的第二个组件是空的，但由于某种原因向它提供空数据抛出错误

public List<TestSuiteModel> MySecondList = new List<TestSuiteModel>()
{
    new Value () {id = 1}, // disambiguous error here
};


<Dropzone Items="MyThirdList.value" Class="h-100">
  <ChildContent>
      <div class="card" style="border-left: 3px solid black">
          <div class="card-body">
              <h6>@context.id</h6>
          </div>
      </div>
  </ChildContent>
</Dropzone>

所以问题出在上面的组件和List上。 我不知道如何提供一个空列表。

顺便说一句，这就是 TestSuiteModel 的样子：

namespace ABC.Models.TestSuiteModel 
{
    public class TestSuiteModel 
    {
        public List<Value> value { get; set; }
        public int count { get; set; }
    }

    public class Value
    {
        public int id { get; set; }
        public string name { get; set; }
    }
}

Answer 1

您应该确保集合属性已初始化，因为在内部，此库会迭代集合，如果null出于显而易见的原因抛出。

添加以下初始化：

    public class TestPlansModel
    {
        public List<Value> value { get; set; } = new List<Value>();
        public int count { get; set; }
    }

所以上面的工作完美但我需要我的第二个组件是空的，但由于某种原因向它提供空数据抛出错误

在您提供的示例中，列表的类型与您正在初始化的 model 的类型不同。

Answer 2

而不是new Value () {id = 1}, // disambiguous error here ，写new TestSuiteModel() { value = new Value () { id = 1 } } 。

这应该用一个空的 TestSuiteModel 初始化列表。

编辑：忘记值列表，这里是初始化，包括所有内容：

public List<TestSuiteModel> MySecondList = new List<TestSuiteModel>()
{
    new TestSuiteModel()
    {
        value = new List<Value>()
            {
                new Value() { id = 1 }
            }
    }
};