Blazor - сравнение предыдущего и следующего состояния - PullRequest
Новая
       116

Blazor - сравнение предыдущего и следующего состояния

3 голосов
/ 29 мая 2020

У меня есть таблица студентов в Blazor, которая поступает из api, и я также получаю отправленные данные для обновления информации об учениках, которая в основном является оценкой при изменении в базе данных, pu sh - это работает нормально, и оценка обновляется, но я также хочу изменить цвет фона поля, которое было обновлено в таблице после изменения оценки на красный, только тег td для нескольких se c, мой код такой следуйте: 

@foreach(var student in SS.GetStudents()){
     <tr>
          <td> student.name </>
          <td> student.section </>
          // trying to compare between the previous and next state
          var stud = SS.GetStuentsCopy().SingleOrDefault(s =>s.Id == student.Id);
          var color = "";
          if(stud.score != student.score){
            color = red;
           }
          <td class="@color"> student.score </>
     </tr>
  }

   @code{
         [Inject]
         public StudentsStates SS { get; set;}
         public StudentsResponse Students { get; set; }
         protected override async Task OnInitializedAsync()
         { 
              // Subscribe to the StateChanged EventHandler
               SS.StateChanged +=
               SSAdvancedStateChanged;

          Students = await Service.GetStudents();
         // update the students and the copy together
          SS.UpdateStudents(Students)
          SS.UpdateStudentsCopy(Students)


       //upon receiving students updated score
                hubConnection = new HubConnectionBuilder()
        .WithUrl(NavigationManager.ToAbsoluteUri("/studhub"))
        .Build();

        hubConnection.On<StudentsResponse>("ReceiveMessage", s =>
        {
            // update the students after 3 sec update the copy
            SS.UpdateStudents(s);


           //Here the state is not being updated
           // unless there is a new push 
           // or the issue might be in rendering
           // FYI without the sleep also I can see the changes in the color
            System.Threading.Thread.Sleep(3000);
            SS.UpdateStudentsCopy(s);

        }

      }}

StudentsStates.cs 

namespace Ctrl.Web.Data
{
    public class StudentsStates
    {

        public StudentsResponse Students { get; set; }
        public StudentsResponse StudentsCopy { get; set; }
        public StudentsResponse GetStudents(){return Students;}
        public StudentsResponse GetStudentsCopy(){return StudentsCopy;}
        public void UpdateStudents(Students students){ Students = students;}
        public void UpdateStudentsCopy(Students students){ StudentsCopy = students;}

}}

Как я уже сказал выше, все работает нормально, за исключением случаев, когда в se c есть несколько pu sh, первый Цвет фона выставленной студенческой оценки меняется слишком быстро, иногда вы даже не заметите этого из-за того, что переданные данные и состояние обновляются, я хочу замедлить цвет фона, не влияя на следующую выдвинутую оценку студента или если есть - лучший подход к этому сценарию, мы очень ценим ваши ответы.

1 Ответ

1 голос
/ 03 июня 2020

Я бы предложил создать компонент для ряда студентов следующим образом: 

@foreach(var student in SS.GetStudents())
{
      <StudentRow Student={student} />
}

Затем внутри компонента StudentRow вы можете создать новую частную переменную студента, где вы обновите ее после задержки 3se c и выполните там сравнение. Вместо сохранения идентификаторов в списке или в другой копии:

StudentRow.razor 

  <tr>
      <td> Student.name </>
      <td> Student.section </>
      var color = "";
      if(StudentCopy.score != Student.score){
        color = red;
       }
      <td class="@color"> student.score </>
 </tr>
 @code{
         public StudentResponse StudentCopy { get; set; }
         [Parameter]
         public StudentResponse Student { get; set; }

         protected override async Task OnParametersSetAsync()
         {
          await Task.Delay(3000);
          StudentCopy = Student;

         }
      }

OnParametersSetAsyn c метод, вызываемый, когда компонент получил параметры из его родительский элемент в дереве рендеринга, а входящие значения были присвоены свойствам. Подробнее здесь

...