首页 > 其他分享 >[Blazor] 学习随笔——生命周期

[Blazor] 学习随笔——生命周期

时间:2024-03-25 11:23:39浏览次数:22  
标签:生命周期 Items await OnInitializedAsync item Task foreach Blazor 随笔

微软文档ASP.NET Core Razor 组件生命周期,中文都认识,意思不是太明白,故做了一些测试。

OnInitialized与OnInitializedAsync

@page "/"

@foreach (var item in Items)
{
    @item
    <hr />
}

@code {
    List<int> Items = default!;

    protected override void OnInitialized()
    {
        Items = Enumerable.Range(0, 10).ToList();
    }
}

能正确运行

  1. 运行 OnInitialized
  2. 运行 @foreach
@page "/"

@foreach (var item in Items)
{
    @item
    <hr />
}

@code {
    List<int> Items = default!;

    protected override  async Task  OnInitializedAsync()
    {
        Items = Enumerable.Range(0, 10).ToList();
        await Task.Delay(1);
//do Something
    }
}

也能正确运行

  1. 运行 OnInitializedAsync 到await ...
  2. 运行 @foreach
  3. 运行 OnInitializedAsync 的do something
@page "/"

@foreach (var item in Items)
{
    @item
    <hr />
}

@code {
    List<int> Items = default!;

    protected override  async Task  OnInitializedAsync()
    {
        await Task.Delay(1);
        Items = Enumerable.Range(0, 10).ToList();
    }
}

出错了,@foreach语句Items为空

  1. 运行 OnInitializedAsync 到await ...
  2. 运行 @foreach,Items尚未赋值,出错

所以,异步的写法必须如下:

@page "/"
@if (Items is not null)
{
    foreach (var item in Items)
    {
        @item
        <hr />
    }
}

@code {
    List<int> Items = default!;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(1);
        Items = Enumerable.Range(0, 10).ToList();
    }

}

标签:生命周期,Items,await,OnInitializedAsync,item,Task,foreach,Blazor,随笔
From: https://www.cnblogs.com/catzhou/p/18093990

相关文章

  • 关于《随笔》这个栏目
    最近感觉时间过的很快,不知不觉就毕业一年多了,不知不觉工作也半年多了,一直想着做一个自己的博客网站,拖着拖着就拖到了今天...但是还好行动了起来,这里会记录自己工作上成长的过程,也会记录很多心路成长历程,同时我也会时常回顾一下自己写的东西,温故而知新嘛///关于《随笔》这个栏目/......
  • Blazor学习记录四_表单和验证___
    12.表单和验证表单几件套——EditForm组件验证特性标签或说注解[Required]命名空间System.ComponentModel.DataAnnotations其作用在模型类的属性前面。绑定模型,即组件参数Model="Instance"(一般是一个class对象)验证器子组件<DataAnnotationsValidator/>验证结果子组......
  • Blazor整合layui
    复制layui文件夹到wwwroot文件夹中:razor组件中引入js文件和css文件:@page"/user"@[email protected]@injectUserServicemyUserService<linkhref="/layui/css/layui.css"rel="stylesheet"><scriptsrc="/......
  • [MAUI]集成高德地图组件至.NET MAUI Blazor项目
    @目录前期准备:注册高德开发者并创建key登录控制台创建key获取key和密钥创建项目创建JSAPILoader配置权限创建定义创建模型创建地图组件创建交互逻辑项目地址地图组件在手机App中常用地理相关业务,如查看线下门店,设置导航,或选取地址等。是一个较为常见的组件。在.NETMAUI......
  • 随笔集 #1 盐与胡椒
    台阶身份证丢在学校考场,吃完饭又匆忙回去拿,沿着来路缓缓上坡,放下手机,抬起头,天色正好,这天空蓝的并不透彻,似有些迷蒙,也带些慵懒透亮的细云涂缀上白色,两旁不是浮现些古木色的街道,古色与古气在空气中浮动,流淌的时光凝滞在一旁,随尘埃一起沉睡,它们仿佛不曾变化,随时间一起见识着这漫长的......
  • 【踩坑随笔】Kaggle安装langchain相关依赖报错
    kaggle执行语句%pipinstalldatasetslangchainsentence_transformerstqdmchromadblangchain_wenxin安装langchain相关依赖报错的时候出现了以下报错主要是版本不匹配,报错什么就再加载什么就可以了,执行下面的语句%pipinstallkeras-core执行结果%pipinstallw......
  • 【Python小随笔】 SSH 获取信息
    importparamiko#获取信息defcheck_msg(hostname,username,password):#创建SSH客户端实例ssh_client=paramiko.SSHClient()ssh_client.set_missing_host_key_policy(paramiko.AutoAddPolicy())ssh_client.connect(hostname,22,username,passwo......
  • Vue 的父组件和子组件生命周期钩子函数执行顺序?
    Vue的父组件和子组件生命周期钩子函数执行顺序可以归类为以下4部分:加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted子组件更新过程父beforeUpdate->子beforeUpdat......
  • Spring中getBean的生命周期和整个链路原理
    publicabstractclassAbstractBeanFactoryextendsFactoryBeanRegistrySupportimplementsConfigurableBeanFactory{publicObjectgetBean(Stringname)throwsBeansException{returndoGetBean(name,null,null,false);}protected<T&......
  • 软件测试的学习随笔001
    T01:我理解的软件测试流程:1.需求分析阶段:测试团队与业务团队和开发团队合作,了解需求与功能,确定测试范围与重点,分配好产品计划的排期。2.测试计划阶段:制定测试计划,包括测试目标、测试策略、资源需求、进度安排等等。3.测试设计阶段:根据需求和设计文档编写测试用例,设计测试数据。......