如何从 model 遍历数组

Question

我有一个 API 返回这样的响应：

{
  "count": 1,
  "value": [
    {
      "id": "20",
      "url": "https://dev.azure.com/xxx/_apis/wit/workItems/20"
    },

    {
      "id": "21",
      "url": "https://dev.azure.com/xxx/_apis/wit/workItems/20"
    }
  ]
}

我正在将响应映射到 C# model，如下所示：

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

  public class Value
  {
    public string id { get; set; }
    public string url { get; set; }
  }
}

我将index.razor页面中的 model 初始化为：

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


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

TestSuitesResult在这一步工作正常，因为我可以执行一个 foreach 循环并看到 json 响应显示在我的 blazor 页面上。

我唯一的问题是当我使用库时： https://github.com/Postlagerkarte/blazor-dragdrop

图书馆说将拖放服务用作：

<Dropzone Items="MyItems">
  <div>@context.MyProperty</div>
</Dropzone>

MyItems是一个示例数组， MyProperty是一个数组键。

但是当我这样使用它时，它不起作用：

<Dropzone Items="TestSuitesResult">
  <div>@context.value</div>
</Dropzone>

我收到一条错误消息，指出 TestSuitesResult 无效。 我不知道如何将数组传递到组件中

Answer 1

当呈现Dropzone组件时，可能尚未填充TestSuitesResult object。 您也没有针对列表 object。请尝试以下实现：

@if(TestSuitesResult != null)
    {
      <Dropzone Items="TestSuitesResult.value">
          <div>@context.url </div>
      </Dropzone>
    }

Answer 2

我认为 Dropzone 组件试图将整个TestSuitesResult object 用作项目数组，但它需要一个值数组。 您应该将TestSuitesResult object 的 value 属性分配给 Dropzone 组件的Items属性：

<Dropzone Items="TestSuitesResult.value">
<div>@context.id</div>
</Dropzone>

此外，在呈现 Dropzone 组件时，可能尚未填充TestSuitesResult object。 要解决此问题，您可以考虑使用加载指示器仅在填充了 TestSuitesResult object 之后才呈现 Dropzone 组件。

@if (TestSuitesResult != null)
{
 <Dropzone Items="TestSuitesResult.value">
 <div>@context.value</div>
 </Dropzone>
}
else
{
  // ... loading
}

Answer 3

尝试这个

List<Value> TestSuitesResult;
protected async Task GetTestSuites()
{
  // url = ... 
  var model = await TestSuiteService.GetTestSuites(url);
  TestSuitesResult = model.value;

  await base.OnInitializedAsync();
}

Answer 4

dropzone 组件实际上希望您提供一个实现IList<T>的属性

在 Visual Studio 中的参数名称上按 F12 时，您可以看到这一点。 或者在 Github 的代码内。

public IList<TItem> Items { get; set; }

因此，您需要做的就是向组件提供您的值。

@if (TestSuitesResult != null)
{
    <Dropzone Items="TestSuitesResult.value">
        <div>@context.id</div> @* access properties from Value class here *@
    </Dropzone>
}