Blazor-比较上一个和下一个状态 [英] Blazor - Compare Previous and Next State

问题描述

我有一个来自Blazor的来自api的学生表，并且我还收到了推送数据以更新学生信息，该信息基本上是数据库更改时的得分，推送工作正常，并且分数正在更新，但我也想在分数变化后将表中已更新字段的背景颜色更改为仅td标签红色几秒钟，我的代码如下:

I have a table of students in Blazor, which is coming from an api, and I am also receiving a pushed data to update the students info which is basically the score upon a change in the database, the push is working fine and the score is being updated but I also want to change the background colour of the field that has been updated in the table upon a change in the score to red just the td tag for few sec, my code is as follow:

@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

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;}

}}

正如我上面所说的，除了在几秒钟内多次按下外，其他所有东西都工作正常，第一次按下的学生分数的背景色变化太快，有时由于按下的数据和状态，您甚至都不会注意到它正在更新中，我想要的是放慢背景色，而不会影响下一个推送的学生成绩，或者如果有解决此问题的更好方法，您的答案将受到高度赞赏.

As I said above everything is working fine except when there is a multiple push in a sec, the first pushed student score's background color is being changed too fast, sometimes u won't even notice it because of the pushed data and state is being updated, what I want is to slow down the background color without effecting the next pushed student score or if there is a better approach to this scenario, your answers are highly appreciated.

推荐答案

我建议为学生行创建一个组件，如下所示:

I would suggest creating a component for the student row as follow:

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

然后，您可以在StudentRow组件内部创建一个新的私有学生变量，在其中您会在3秒的延迟后对其进行更新并在那里进行比较，而不是将ID保存在列表或其他副本中:

Then inside the StudentRow component u can create a new private student variable where u update it after a delay of 3sec and do the comparison there, Instead of saving the ids in a list or in another copy:

StudentRow.razor

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;

         }
      }

OnParametersSetAsync方法，当组件已从渲染树中的其父级接收到参数并且传入值已分配给属性时，将调用此方法. 在此处了解更多信息

OnParametersSetAsync method invoked when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties. Read more here

这篇关于Blazor-比较上一个和下一个状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！