Блог

Главная - Вопросы по программированию - блейзор, загружающий счетчик, когда компонент загружает html / css

блейзор, загружающий счетчик, когда компонент загружает html / css

#c# #.net #blazor

#c# #.net #блейзор

Вопрос:

У меня есть небольшая вещь, которую мне нужно сделать. Вот в чем моя проблема. Я открываю компонент, а затем я могу нажать «редактировать», а затем мне нужно 3-4 секунды, пока на странице отображается нужный html / css. Что я пытаюсь сделать, так это то, что когда я нажимаю «редактировать», я устанавливаю «загрузка = истина», а когда компонент завершает рендеринг этого нового html / css, я устанавливаю «загрузка = ложь». Вот пример того, чего я пытаюсь достичь:

 if (!edit) {
   <h2>test</h2>
   @foreach (var item in items) {
      <p>Test item</p>
   }
}
else {
   <button @onclick = "() => { edit = true; }">
   <h2>test other </h2>
   <input />
   <input />
}

Вот как я настроил счетчик загрузки для отображения на странице:

 await InvokeAsync(() => { loading = true; });
await InvokeAsync(() => { loading = false; });

Итак, мой вопрос в том, как я могу сделать так, чтобы, когда человек нажимает «Редактировать», счетчик автоматически начинал вращаться на экране. Я знаю, как это сделать при OnInitializedAsync, но в данной конкретной ситуации он не инициализируется, он просто показывает другую часть компонента (но это занимает 5 секунд, огромный код). Есть ли способ?

Комментарии:

1. Вызываете ли вы ‘StateHasChanged ()’ после установки свойства / поля загрузки?

2. нет, не устанавливайте его. «await InvokeAsync(() => { loading = true; });» автоматически выполняет эту работу. Но проблема не в этом. Проблема в том, что я не понимаю жизненный цикл компонентов blazor. Так что не знаю, куда поместить эти «loading = true» и «loading = false». Это в OnAfterRenderAsync? Как мне использовать логику для этой работы

3. @PovilasDirse обычно вы размещаете его до и после вызова для загрузки данных. Иногда мне приходилось использовать Thread.Sleep(1) для обновления экрана после каждого установки флага загрузки.

4. итак, у меня было бы так: @onclick = «() => {await logic(); }». Внутри метода «logic» я бы перевел поток в спящий режим и установил для edit значение true?

5. @PovilasDirse да, до и после обработки данных или чего-то еще, что отнимает время. Внутри «логики» edit = true; ThreadSleep(1); StateHasChanged(); Выполняйте свой медленный код ….; edit = false; StateHasChanged();

Ответ №1:

Для промежуточных обновлений требуется StateHasChanged. Blazor применяет его до и после события, но здесь это вам не поможет.

 <button @onclick="@DoLogic">Load</button>
 
 async Task DoLogic()
{
    edit = false;         // means loading == true
    StateHasChanged();    // to be sure, probably not needed
    await Task.Delay(1);  // allow time for the rendering

    // do the actual loading

    edit = true;          // means loading == false
}

Хитрость здесь await Task.Delay(1); в том, что ваш метод на некоторое время приостанавливается, и Blazor может обновить DOM.

Здесь нет причин для InvokeAsync.

Комментарии:

1. Спасибо. Только что увидел ваше сообщение. То, что я сделал, было именно этим, и да, это сработало. Спасибо

2. спасибо, это сработало и для меня. определенно была задача ожидания. Задержка (1); что сделало свое дело, хотя и необычно.

Метки: