首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在一条语句中按多级对angular dart中的列表进行排序?

在Angular Dart中按多级对列表进行排序可以使用sort()方法和自定义的比较函数来实现。以下是一个示例的代码,演示如何按多级对列表进行排序:

代码语言:txt
复制
class Item {
  String name;
  int category;
  int subcategory;
  // 其他属性

  Item(this.name, this.category, this.subcategory);
}

void main() {
  List<Item> items = [
    Item('item1', 2, 1),
    Item('item2', 1, 2),
    Item('item3', 2, 2),
    Item('item4', 1, 1),
  ];

  // 按category和subcategory升序排序
  items.sort((a, b) {
    if (a.category == b.category) {
      return a.subcategory.compareTo(b.subcategory);
    } else {
      return a.category.compareTo(b.category);
    }
  });

  // 打印排序后的结果
  items.forEach((item) {
    print('Name: ${item.name}, Category: ${item.category}, Subcategory: ${item.subcategory}');
  });
}

在上面的代码中,Item类表示列表中的每个项目,包含namecategorysubcategory等属性。使用sort()方法对列表进行排序,传入一个自定义的比较函数。比较函数首先比较category属性,如果相等则比较subcategory属性,最终返回比较结果。

以上代码的输出结果为:

代码语言:txt
复制
Name: item2, Category: 1, Subcategory: 1
Name: item4, Category: 1, Subcategory: 2
Name: item1, Category: 2, Subcategory: 1
Name: item3, Category: 2, Subcategory: 2

这样,列表就按照指定的多级排序完成了。

在腾讯云的产品中,与Angular Dart开发相关的产品有云服务器(ECS)、云数据库MySQL(CDB)、云存储(COS)等。您可以根据具体需求选择相应的产品。以下是腾讯云相关产品的介绍链接:

请注意,上述回答仅为示例,并不能涵盖所有情况。在实际应用中,可能需要根据具体的需求和开发环境进行相应的调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 用户输入 顶

用户操作,点击链接,下按钮,输入文字引发DOM事件。 本页说明如何使用Angular事件绑定语法将这些事件绑定到组件事件处理程序。 运行实例(查看源代码)。...在编写绑定时,请注意模板语句执行上下文。 模板语句中标识符属于特定上下文对象,通常是控制模板Angular组件。...代码使用box变量来获取输入元素值,并在标签之间进行插值显示。 模板是完全独立。 它不绑定到组件,组件什么也不做。 在输入框输入内容,然后观看每个按键显示更新。 ?...现在,把它放在一个微型应用程序,可以显示英雄列表,并添加新英雄列表。 用户可以通过在输入框输入英雄名字并点击添加来添加英雄。 ? 下面是“英雄之旅”组件。...第二个语句newHero.value =''在新英雄添加到列表后清除输入框。 源代码 这里是在这个页面讨论所有代码。

3.5K00
  • AngularDart4.0 指南- 显示数据 顶

    您可以通过将HTML模板控件绑定到Angular组件属性来显示数据。 在这个页面,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地在列表下方显示一条消息。...当这些属性改变时,Angular会更新显示。 更准确地说,重新显示是在与视图相关某种异步事件之后发生,例如按键,计时器完成或HTTP请求响应。...在任一种样式,模板数据绑定都具有组件属性相同访问权限。 用* ngFor显示一个列表属性 要显示英雄列表,首先向组件添加英雄名字列表,并将myHero重新定义为列表第一个名字。...Angular ngFor指令来显示英雄列表每个项目。...用NgIf进行条件显示 有时候,只有在特定情况下,应用程序才需要显示视图或视图一部分。 如果有三个以上英雄,让我们更改示例以显示一条消息。

    5.3K10

    AngularDart4.0 指南- 模板语法二 顶

    当指令没有合适宿主元素时如何元素进行分组。 如何编写自己结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见结构指令: NgIf:有条件地从DOM添加或删除元素。...您告诉Angular将该块用作呈现列表每个项目的模板。...*ngFor和trackBy NgFor指令可能表现不佳,特别是在大型列表一个项目,删除项目或添加项目的小改动可以触发DOM操作级联。...本示例在hero_switch_components.dart文件定义四个“emotional hero”组件之间进行切换。每个组件都有一个绑定到父组件currentHero英雄输入属性。...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表进行排序。 对于这些小型转换来说,Angular 管道是一个很好选择。 管道是简单函数,它接受一个输入值并返回一个转换后值。

    30K20

    AngularDart 4.0 高级-HTTP 客户端 顶

    它从服务接收heroes并且在列表展示它们.用户可以添加一个新Hero并且保存到服务端. 下面是应用程序UI: ? 此demo有一个单独组件, HeroListComponent....当组件构造器很简单时,组件更容易测试和调试,而所有真正工作(调用远程服务器)都是由单独方法处理。...英雄列表组件方法, getHeroes() 和addHero(), 指定当异步方法调用成功或失败时采取操作....获取数据 在之前示例,应用通过返回服务模拟英雄来伪造与服务器交互: import 'dart:async'; import 'package:angular/angular.dart';..._heroService.getHeroes()在一个try子句中, errorMessage 变量有条件绑定在模板.errorMessage 变量将被指定一个值: lib/src/toh/hero_list_component.dart

    9.7K10

    AngularDart4.0 指南-体系结构概述 顶

    AngularDart(我们通常在这个文档简单地称为Angular)是一个框架,用于在HTML和Dart构建客户端应用程序。...主要Angular库是angular,大多数app模块导入如下: import 'package:angular/angular.dart'; Angular包有其他重要库,angular.security...HeroDetailComponent是HeroListComponent一个子项。 ? 注意是如何在原生HTML元素合适存放。...为了Angular处理出现在模板应用标签,比如,标签对应组件必须在指令列表声明。 providers:组件需要服务依赖注入提供者列表。...Router:在客户端应用程序从一个页面到另一个页面进行导航,而不会离开浏览器 Testing:为您应用编写组件测试和端到端测试。

    7.9K30

    AngularDart4.0 英雄之旅-教程-06服务 顶

    使用单独服务可使组件保持精简并专注于支持视图,并使用模拟服务组件进行单元测试变得容易。 因为数据服务总是异步,所以您将使用数据服务基于Future版本来完成页面。...通过将AppComponent锁定到HeroService特定实现,切换实现用于不同场景(离线操作或使用不同模拟版本进行测试)将很困难。...您可能会试图在构造函数调用getHeroes()方法,但构造函数不应包含复杂逻辑,特别是调用服务器构造函数(如数据访问方法)。 构造函数用于简单初始化,将构造函数参数连接到属性。...将OnInit添加到由AppComponent实现接口列表,并使用里面的初始化逻辑编写一个ngOnInit()方法。 Angular会在正确时间调用它。...有关异步函数更多信息,请参阅在Dart语言浏览声明异步函数。 处理Future 由于HeroService更改,应用程序组件英雄属性现在是Future,而不是英雄列表

    2.9K10

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    在此页面,您将进行以下改进。 从服务器获取英雄数据。 让用户添加,编辑和删除英雄名字。 将更改保存到服务器。 您将教会应用程序远程服务器Web API进行相应HTTP调用。...在进行更改时,请通过重新加载浏览器窗口来保持运行。 提供HTTP服务 您将使用Dart http软件包客户端类与服务器进行通信。...对于Web API服务来说,模拟内存服务将以JSON格式英雄进行编码和解码,所以使用以下功能来增强Hero类:lib/ src/ hero.dart class Hero { final int...URL英雄id标识服务器应该更新哪个英雄。 另外,响应数据是单个英雄对象而不是列表。...,处理程序将创建命名英雄委托给英雄服务,然后将新英雄添加到列表

    11K30

    AngularDart4.0 英雄之旅-教程-07路由 顶

    @Component 模板节点,其中包含title绑定。 将HeroesComponent添加到AppComponent指令列表,以便Angular识别标签。...换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。 由于路由器在自己,首先将该包添加到应用pubspec: ?...之前,您从HeroesComponent提供程序列表删除了HeroService,并将其添加到AppComponent提供程序列表。...本页“路由链接”部分所述,AppComponent模板顶级导航将路由器链接设置为目标路由,/dashboard 和/ heroes固定名称。 这次,您绑定到包含链接参数列表表达式。...按钮点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。

    17.6K30

    AngularDart 4.0 高级-路由概述 顶

    当用户点击按钮,从下拉框中选择,或者响应来自任何来源其他刺激时,您都可以进行命令式导航。并且路由器在浏览器历史记录记录活动,所以后退和前进按钮也起作用。...在任何使用路由器功能Dart文件,导入路由器库: import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令 如果您已经熟悉Angular...Angular应用程序像正常网页导航一样更新浏览器历史。 现在点击危机中心链接查看正在进行危机列表。 ? 选择危机,应用程序会将您带入危机编辑屏幕。...危机详情显示在列表下方同一页面上子视图中。 改变危机名称。 请注意危机列表相应名称不会更改。 ?...与英雄细节不同,当您键入更新时,危机细节更改是暂时,直到您通过下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮。

    6.1K20

    教程|在 Angular 4 中加载功能模块(上)

    尽管 Angular 4 最初是为 JavaScript 而设计,但它在 Angular 2 基础之上添加了更多语言支持,比如 Dart 和 Typescript。...本教程将介绍如何在 Angular 开发和加载功能模块。尽管对于较小应用程序,根模块就足够用了,但对于更大更复杂应用程序,需要创建功能模块。还需要能够高效地加载模块,以获得最佳应用程序性能。...请注意,本教程适用于熟悉使用 Angular 进行基本 Web 应用程序开发开发人员。 Angular 功能模块 单页 Web 应用程序在启动时仅呈现一个 HTML 页面。...您会看到应用程序在默认端口 4200 成功运行,以及一条与此消息类似的消息: 图 1. 应用程序运行在端口 4200 ng 是一条 Angular CLI 命令,您将使用它构建和处理应用程序代码。...在 Windows 机器上,下 Fn+F12。在 Mac 机器上,下 Command->Option->i。现在您会看到 Chrome 开发人员工具 GUI。

    2.2K10

    AngularDart4.0 指南- 依赖注入 顶

    当你为Car写测试时候,你会隐藏它依赖关系。 在测试环境甚至可以创建一个新Engine? Engine是依赖于什么? 这个依赖依赖于什么? 引擎新实例是否会对服务器进行异步调用?...一个Angular注入器负责创建服务实例并将它们注入类HeroListComponent。 你很少自己创建一个Angular注入器。...注册providers最常用方法是使用任何具有providers列表参数Angular注解。 其中最常见是@Component。...provide()函数接受与Provider构造函数相同参数。 provide()函数不能用在Angular注解提供者列表,因为注释只能包含const表达式。...概要 你在这个页面学习了Angular依赖注入基础知识。 您可以注册各种提供程序,并且您知道如何通过向构造函数添加参数来请求注入对象(服务)。 Angular依赖注入比本页描述更有能力。

    5.7K20

    flutter代码风格指南

    dart:math' as math; import 'package:angular\_components/angular\_components' as angular\_components...HTTP = HyperText Transfer Protocol•abbreviations: 缩写词,指取某一单词部分字母(或其他缩短单词方式)代表整个单词,:ID = identification...不要 使用前缀字母 在编译器无法帮助你了解自己代码时, 匈牙利命名法[7] 和其他方案出现在了 BCPL , 但是因为 Dart 可以提示你声明类型,范围,可变性和其他属性, 所以没有理由在标识符名称这些属性进行编码...我们有一些关于它适用规则 文档[14] , Dart 任何官方空格处理规则由 dartfmt[15] 生成 其余格式指南用于 dartfmt 无法修复一些规则 考虑修改你代码让格式更友好 无论你扔给格式化程序什么样代码...这样可以方便搜索某一个路径下代码文件。 我们 URI 和文件路径做了例外。当情况出现在注释或字符串是(通常在导入和导出语句中), 即使文字超出行限制,也可能会保留在一行

    1.2K20

    AngularDart4.0 英雄之旅-教程-04明细 顶

    应用程序重构 在添加新功能之前,您可以从应用程序重构受益。 应用模板文件 您将对应用程序组件模板进行多次更新。...展示英雄们     显示一个英雄列表,首先需要将英雄们添加到视图模板 模拟英雄     在lib / src下以下文件创建十个英雄列表:lib/src/mock_heroes.dart import...应用hero字段 将hero字段替换为AppComponent公共heros字段,并使用模拟英雄进行初始化(不要忘记导入):lib/app_component.dart (heroes) import...ngFor指令遍历组件英雄列表并为该列表每个英雄呈现该模板一个实例。 表达式部分将hero标识为模板输入变量,其中包含每个迭代英雄详情。...您将Hero类移到lib / src下自己文件。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor。

    3K30

    AngularDart 4.0 高级-生命周期钩子 顶

    组件有一个由Angular自己管理生命周期。 Angular创建它,渲染它,创建和渲染它子项,在数据绑定属性发生变化时进行检查,并在将它从DOM删除之前进行销毁。...peek-a-boo存在以显示Angular如何预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志状态。 ?...添加一个英雄会产生一个新英雄。 间谍ngOnInit记录该事件。 重置按钮清除英雄列表Angular从DOM移除所有英雄元素并同时销毁他们间谍指令。...hero属性值是hero对象引用。 Angular并不在意英雄自己name属性发生了变化。 英雄对象引用没有改变,所以从Angular角度来看,没有改变反馈!...以下AfterContent挂钩根据内容子代(只能通过使用@ContentChild注解属性查询它)进行更改。

    6.2K10

    AngularDart4.0 指南- 表单 顶

    禁用窗体提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单新项目。 添加angular_forms Angular表单功能位于angular_forms库,该库位于其自己。...将初学者应用版本内容替换为以下内容:lib/app_component.dart import 'package:angular/angular.dart'; import 'src/hero_form_component.dart...你会看到一个样式化表单! 使用* ngFor添加powers 英雄必须从一个固定机构批准权力列表中选择一个超级大国。 您在内部维护该列表(在HeroFormComponent)。...您将在表单添加一个select,并使用ngFor(先前在“显示数据”页面中看到一种技术)将选项绑定到powers列表。...如果没有Angular帮助,你需要做什么才能将按钮启用/禁用状态连接到表单有效性? 你来说,这很简单: 在(增强)表单元素上定义一个模板引用变量。 在多处按钮引用该变量。

    17.5K30

    来学习了解下Flutter及Dart 编码规范?

    dart官方文档 【Effective Dart】 规范主要分为四个部分: 样式规范 文档规范 使用规范 设计规范 每个部分都有许多例子说明,每个例子都会以下面五个词某些作为开头: DO :...package:js/js.dart' as js; ❌ import 'dart:math' as Math; import 'package:angular_components/angular_components...= other.overflowChars) return overflowChars < other.overflowChars; 文档规范 DO: 在dart注释,更加推荐使用///而非//...'; 集合 dart创建空可扩展 List 有两种方法: [] 和 List();创建空 HashMap 有三种方法: {}, Map(),和 LinkedHashMap() 如果要创建不可扩展列表或其他一些自定义集合类型...在Dart,如果要迭代序列,那么惯用方法就是使用循环。

    2.7K30

    浅谈并对比不同数据库sql执行顺序

    最后执行order by后面的语句,最终结果进行排序。 最后limit限制数据条数。...) tbl as 炸裂后列名 3.where 4.group by (开始使用select别名,从group 开始往后都可用) 5.聚合函数 Sum() avg() count(1)等...6.having 7.select 若包含over()开窗函数,执行完非开窗函数后select等待执行完开窗函数,然后执行select完,开窗函数通过表数据进行分区和排序,跟select查询字段是平行关系...WHERE:vt3应用 WHERE 筛选器只有使 where_condition 为true行才被插入vt4 GROUP BY:GROUP BY子句中列表vt4行分组生成vt5 CUBE...select列表产生vt8 DISTINCT:将重复行从vt8去除产生vt9 ORDER BY:将vt9order by子句中列表排序生成一个游标vc10 TOP:从vc10开始处选择指定数量或比例行生成

    1K20
    领券