如何在运行时填充MatSelect组件并绑定API获取的Tax对象列表

你现有的MatSelect渲染逻辑没有问题，只需要补全API数据获取和集合定义的逻辑即可正常运行，完整实现如下：

完整代码示例 #

<!-- MatSelect组件部分 现有逻辑无需调整，可按需增加显示格式 -->
<MatSelect Label="税率" @bind-Value="ProductData.TaxId">
    @if (taxItems.Any())
    {
        @foreach (var tax in taxItems)
        {
            <MatOption Value="@tax.Id">@tax.Percentage %</MatOption>
        }
    }
    else
    {
        <!-- 可选：数据加载中时显示的占位选项 -->
        <MatOption Disabled="true" Value="0">加载中...</MatOption>
    }
</MatSelect>

@code {
    // 存储API返回的税率集合
    private List<Tax> taxItems = new List<Tax>();
    // 业务实体对象，按你实际业务定义调整
    private Product ProductData = new Product();
    
    // 注入HTTP客户端用于调用API
    [Inject] private HttpClient Http { get; set; }

    // 组件初始化时加载API数据
    protected override async Task OnInitializedAsync()
    {
        // 替换为你实际的API请求地址
        taxItems = await Http.GetFromJsonAsync<List<Tax>>("/api/tax/list");
    }

    // Tax实体定义和你现有代码一致
    public class Tax
    {
        public int Id { get; set; }
        public double Percentage { get; set; }
    }

    // 示例Product实体，按你实际业务调整
    public class Product
    {
        public int TaxId { get; set; }
        // 其他产品属性...
    }
}

注意事项 #

• 需确保项目中已经正确注册了HttpClient服务，Blazor WebAssembly模板默认已注册，Blazor Server需在Program.cs中手动添加服务注册
• ProductData.TaxId的类型必须和Tax.Id的类型完全一致（此处为int），否则会出现绑定失效的问题
• 可以根据业务需要调整选项的显示文本，比如保留原始数值或者增加单位后缀

内容的提问来源于stack exchange，提问作者Tassisto