更改文件时更新Blazor组件

Question

更改文件时，我想更新我的大餐组件。这是我的代码：

<div class="orders">
    <div class="sales">
        <h3>Asks</h3>
        <table class="table text-light orders-table table-hover">
            <thead>
                <tr class="text-center">
                    <th>Order Id</th>
                    <th>Price</th>
                    <th>Quantiy</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach(var order in Model.Sales)
                {
                    <tr>
                        <td class = "">@order.OrderID</td>
                        <td class = "">@order.Price.ToString("0.00")</td>
                        <td class = "">@order.Quantity</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    <div class="buys">
        <h3>Bids</h3>
        <table class="table text-light orders-table table-hover">
            <thead>
                <tr class="text-center">
                    <th>Order Id</th>
                    <th>Price</th>
                    <th>Quantiy</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach(var order in Model.Buys)
                {
                    <tr>
                        <td class = "">@order.OrderID</td>
                        <td class = "">@order.Price.ToString("0.00")</td>
                        <td class = "">@order.Quantity</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>
@code {
    public Orders()
    {
    }

    [Parameter]
    public IndexViewModel Model { get; set; }

    private FileSystemWatcher watcher = new FileSystemWatcher(@"My\folder\directory\");

    protected override void OnInitialized()
    {
        watcher.NotifyFilter = NotifyFilters.Attributes
                                 | NotifyFilters.CreationTime
                                 | NotifyFilters.DirectoryName
                                 | NotifyFilters.FileName
                                 | NotifyFilters.LastAccess
                                 | NotifyFilters.LastWrite
                                 | NotifyFilters.Security
                                 | NotifyFilters.Size;

        watcher.Changed += OnChanged;
        watcher.Created += OnCreated;
        watcher.Deleted += OnDeleted;
        watcher.Renamed += OnRenamed;

        watcher.Filter = "*.txt";
        watcher.IncludeSubdirectories = true;
        watcher.EnableRaisingEvents = true;
    }

    private void OnChanged(object sender, FileSystemEventArgs e)
    {
        Model = new IndexViewModel(new List<OrderViewModel>(), new List<OrderViewModel>());

        Console.WriteLine($"Changed: {e.FullPath}");
        Model.Sales.Add(new OrderViewModel() { OrderID = new Random().Next(int.MaxValue), Price = new Random().Next(10), Quantity =  new Random().Next(100)});
        //Model.Sales.RemoveAt(new Random().Next(Model.Sales.Count - 1));
        Model.Sales = Model.Sales.OrderBy(x => x.Price).ToList();

        Model.Buys.Add(new OrderViewModel() { OrderID = new Random().Next(int.MaxValue), Price = new Random().Next(20), Quantity =  new Random().Next(100)});
        //Model.Buys.RemoveAt(new Random().Next(Model.Sales.Count - 1));
        Model.Buys = Model.Buys.OrderByDescending(x => x.Price).ToList();
    }

    private static void OnCreated(object sender, FileSystemEventArgs e)
    {
        string value = $"Created: {e.FullPath}";
        Console.WriteLine(value);
    }

    private static void OnDeleted(object sender, FileSystemEventArgs e) =>
        Console.WriteLine($"Deleted: {e.FullPath}");

    private static void OnRenamed(object sender, RenamedEventArgs e)
    {
        Console.WriteLine($"Renamed:");
        Console.WriteLine($"    Old: {e.OldFullPath}");
        Console.WriteLine($"    New: {e.FullPath}");
    }
}

当文件更改后，将调用方法，并更改indexViewModel，但在屏幕上没有更改。我尝试使方法静态，但是我也必须使indexViewModel类静态静态，这对我不起作用。

Answer 1

尝试在statehaschanged on Changed 方法的末尾调用statehaschanged，以重新渲染用新值渲染UI：

InvokeAsync( () => StateHasChanged());