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

在Angular代码中,在ngFor迭代之后,数据是按列显示的,但希望数据按行显示

要实现数据按行显示,可以使用CSS的flexbox布局或者grid布局来实现。以下是两种方法的示例:

  1. 使用flexbox布局: 在父元素上添加以下CSS样式:
代码语言:txt
复制
.parent-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

在ngFor迭代的子元素上添加以下CSS样式:

代码语言:txt
复制
.child-element {
  flex-basis: 100%;
}

这样,子元素会按照每行一个的方式进行布局,实现按行显示。

  1. 使用grid布局: 在父元素上添加以下CSS样式:
代码语言:txt
复制
.parent-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

在ngFor迭代的子元素上添加以下CSS样式:

代码语言:txt
复制
.child-element {
  grid-column: span 1;
}

这样,子元素会按照每行一个的方式进行布局,实现按行显示。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动推送:https://cloud.tencent.com/product/tpns
  • 腾讯云区块链服务:https://cloud.tencent.com/product/tbaas
  • 腾讯云元宇宙:https://cloud.tencent.com/product/tencent-metaverse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 指南- 显示数据

您可以通过将HTML模板控件绑定到Angular组件属性来显示数据。 在这个页面,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地列表下方显示一条消息。...最终用户界面如下所示: ? 现场示例(查看源代码)演示了此页面描述所有语法和代码片段。 用插值显示组件属性 显示组件属性最简单方法通过插值来绑定属性名称。...当这些属性改变时,Angular会更新显示。 更准确地说,重新显示与视图相关某种异步事件之后发生,例如按键,计时器完成或对HTTP请求响应。...模板中使用任何Angular指令之前,您需要将它们组件@Component注解指令参数。...现在英雄出现在一个无序列表。 ? 为数据创建一个类 应用程序代码直接在组件内定义数据,这不是最佳实践。 但是,一个简单演示,没关系。 目前,绑定是一个字符串列表。

5.3K10

Angular 显示英雄列表

本页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...当依次遍历这个列表时,hero 会为每个迭代保存当前英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法关键部分。 浏览器刷新之后,英雄列表出现了。...你可以本指南底部查看最终代码中找到它们。 @Component 元数据中指定样式和样式表都是局限于该组件。 ...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式定义那个。...详情部分仍然空。 点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。

4.4K70
  • AngularDart 4.0 高级-管道 顶

    事实上,您可能会喜欢将它们应用到HTML模板,就像样式一样。 介绍Angular管道,这是一种编写显示值转换方法,您可以HTML声明这些转换。 尝试一下实例(查看源代码)。...管道和变化检测 Angular通过每个DOM事件之后运行更改检测过程查找数据绑定值更改:每次击键,鼠标移动,计时器滴答和服务器响应。 这可能昂贵Angular努力尽可能降低成本并适当。...Flying Heroes应用程序通过复选框开关和附加显示扩展代码,以帮助您体验这些效果。 ? 替换列表发信号通知Angular更新显示有效方式。 你什么时候更换清单? 数据发生变化时。...在这个例子,这是一个简单规则,其中更改数据唯一方法添加一个英雄。 更常见情况,您不知道数据何时发生变化,特别是以多种方式变异数据应用程序,可能在远离应用程序位置。...您可以实例(查看源代码确认,当您添加英雄时,即使您变更heroes列表,飞行英雄也会显示更新。 不纯AsyncPipe Angular AsyncPipe一个不纯管道有趣例子。

    6.4K20

    Angular 2 数据显示

    本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式: 通过插值表达式显示组件属性 通过 NgFor 显示数组型属性 通过 NgIf 实现条件显示 ---- 通过插值表达式显示组件属性...要显示组件属性,插值最简单方式,格式为:{{属性名}}。...以下代码基于 Angular 2 TypeScript 环境配置 来创建,你可以该章节上下载源码,并修改以下提到几个文件。...{ title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性值,并显示浏览器显示信息如下: 使用 ngFor...显示数组属性 我们也可以循环输出多个站点,修改以下文件: app/app.component.ts 文件: import { Component } from '@angular/core'; @Component

    2.4K20

    Angular 显示英雄列表

    本页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...当依次遍历这个列表时,hero 会为每个迭代保存当前英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法关键部分。 浏览器刷新之后,英雄列表出现了。...你可以本指南底部查看最终代码中找到它们。 @Component 元数据中指定样式和样式表都是局限于该组件。 ...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式定义那个。...详情部分仍然空。 点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。

    4K30

    Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    让更多后端程序员更好了解学习Angualr,拓展自己技术栈。 Angular简介:   Angular 一个应用设计框架与开发平台,用于创建高效、复杂、精致单页面应用。...ngFor循环使用: 属性index、count、first、last、even、odd index属性提供当前对象索引 count提供当前数据长度,类似于datasource.length...ng-if判断使用: //angular没有else只能都通过ng-if来判断 准备 进行...元素使用 CSS 类 ng-class-even 类似 ng-class,偶数起作用 ng-class-odd 类似 ng-class,奇数起作用 ng-click 定义元素被点击时行为...定义集合每项数据模板 ng-selected 指定元素 selected 属性 ng-show 显示或隐藏 HTML 元素 ng-src 指定 元素 src 属性 ng-srcset

    5.3K41

    Angular快速学习笔记(3) -- 组件与模板

    显示数据 Angular 中最典型数据显示方式,就是把 HTML 模板控件绑定到 Angular 组件属性。...*ngFor Angular 迭代”指令。... 小结 带有双花括号插值表达式 (interpolation) 来显示一个组件属性 用 ngFor 显示数组 用一个 TypeScript 类来为你组件描述模型数据显示模型属性 用 ngIf...下面介绍其中两个:管道和安全导航操作符 管道操作符 ( | ) 绑定之前,表达式结果可能需要一些转换。例如,可能希望把数字显示成金额、强制文本变成大写,或者过滤列表以及进行排序。...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。

    15.3K30

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

    样式属性命名 虽然AngularDartcamelCase和dash-case风格属性命名方案等价只有dash-case命名法才能被dash:html包CssStyleDeclaration...分配给* ngFor文本是指导迭代器进程指令。 *ngFor微语法 分配给* ngFor字符串不是模板表达式。 这是一种微语法 - Angular解释一种小语言。...字符串“let hero of heroes”指: 取英雄列表每个英雄,将其存储本地英雄循环变量,并使其可用于每次迭代模板HTML。...请注意数据绑定目标和数据绑定源之间重要区别。 绑定目标=左边。 源位于=右侧。 绑定目标绑定标点符号属性或事件:[],()或[()]。...您只能绑定到明确标识为输入和输出属性。 在下面的代码片段,iconUrl和onSaveAppComponent数据绑定成员,并且等号(=)右侧引用语法中被引用。

    30K20

    AngularDart4.0 指南- 用户输入 顶

    当用户下并释放一个键时,会发生一个键盘事件,而Angular$ event变量中提供一个相应DOM事件对象,该代码将该代码作为参数传递给组件onKey()方法。...每次调用之后,onKey()方法将输入框值附加到组件values属性,后跟一个分隔符(|)。 该模板使用Angular插值({{...}})来显示值属性。...代码使用box变量来获取输入元素值,并在标签之间进行插值显示。 模板完全独立。 它不绑定到组件,组件什么也不做。 输入框输入内容,然后观看每个按键显示更新。 ?...现在,把它放在一个微型应用程序,可以显示英雄列表,并添加新英雄列表。 用户可以通过输入框输入英雄名字并点击添加来添加英雄。 ? 下面“英雄之旅”组件。...第二个语句newHero.value =''英雄添加到列表后清除输入框。 源代码 这里在这个页面讨论所有代码

    3.5K00

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

    生命周期序列 通过调用其构造函数创建组件/指令后,Angular特定时刻以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular(重新)设置数据绑定输入属性时响应。...ngOnInit Angular首次显示数据绑定属性并设置指令/组件输入属性后,初始化指令/组件。 第一次ngOnChanges之后调用一次。...此示例将SpyDirective应用于由父SpyComponent管理ngFor英雄迭代。...ngOnInit组件获取其初始数据好地方。 教程和HTTP章节显示了如何。 还要记住,指令数据绑定输入属性构建之后才会设置。 如果您需要根据这些属性初始化指令,那么这是一个问题。...Angular单向数据流规则禁止视图组成之后更新视图。 组件视图组合完成后,这两个钩子都会触发。 如果钩子立即更新组件数据绑定comment属性,Angular会抛出一个错误(尝试它!)。

    6.2K10

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

    -- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标将组件英雄列表绑定到模板,迭代它们,并单独显示它们。...ngFor指令遍历组件英雄列表并为该列表每个英雄呈现该模板一个实例。 表达式部分将hero标识为模板输入变量,其中包含每个迭代英雄详情。...显示数据Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页ngFor部分 节点内添加内容hero模板变量来显示英雄属性...' of undefined in [null] 尽管selectedHero.name显示模板必须保留DOM外英雄详细信息,直到出现选定英雄。...结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示列表下方时,很难列表识别选定英雄。

    3K30

    最受欢迎10大Angular技巧

    我们希望能一直见到它们。 比如说, Angular Universal 或 Jest 测试环境没有浏览器,没有 Window,也没有 DOM,那该怎么办呢。...令我有些难过,一些 Angular 开发人员不喜欢创建自己管道,可其实你几乎可以在任何数据转换场景创建管道。 这是适用于许多情况通用管道示例: ?...还有许多运算符不是很流行,但是可以用一代码来解决你特定问题。 我就发现了一个例子: ?...s=20 你甚至可以制作自己 ngFor 替代品 最后一个:Angular 对于 for...of... 之类指令有特殊语法。这样,你可以创建自己 ngFor。...例如,它可以是用于迭代映射 ngFor。或一个简单从一个数字迭代到另一个数字 for: ? ?

    2.1K40

    AngularDart 4.0 高级-结构指令 顶

    它一直倾听事件。 Angular不断检查可能会影响数据绑定更改。 无论组件在做什么,它都会继续这样做。 虽然看不见,组件及其所有后代组件都会占用资源。...您可以分配给ngFor字符串启用这些功能,这是您在Angularmicrosyntax编写。...当你编写自己结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor代码了解更多信息好方法。 模板输入变量 模板输入变量一个变量,其值可以模板单个实例引用。...兄弟元素组 根元素通常能且应该成为结构指令宿主,列表元素()NgFor迭代典型宿主元素。...概要 您可以尝试实例查看本指南代码(查看源代码)。 这是lib文件夹下代码

    16.1K20

    使用Ionic2开发Todo应用0 开始之前1 创建新Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

    这些服务也被称作“providers”将被放置一个providers文件夹。 现在,只有一个HomePage组件,设置一个虚拟视图。我们应用程序我们要修改这个来显示所有待办事项列表。...root page 根页面您应用程序显示第一个页面,然后你可以从这里导航到其他页面。改变Ionic 2应用程序视图可以通过改变这一根页面,或** push ** 推或 pop弹出视图。...ngFor,创建了一个速记到嵌入模板。...这就是Ionic 2 依赖注入工作模式,基本上一种方式告诉应用程序“我们希望通过navCtrl引用到NavController”。通过添加公共关键字它面前,它会自动创建一个成员变量。...最后,我们还添加一个调用save 函数保存在数据服务当一个新条目被添加。现在该函数将马上更新我们数据条目数组,items也将被复制保存到数据服务,以便下次我们回到应用程序可用。

    6.1K50

    AngularDart4.0 指南- 表单 顶

    使用跟踪控件状态特殊CSS类提供视觉反馈。 向用户显示验证错误并启用/禁用表单控件。 使用模板引用变量HTML元素之间共享信息。 您可以Plunker运行实例(查看源代码)并从那里下载代码。...您将在表单添加一个select,并使用ngFor(先前显示数据”页面中看到一种技术)将选项绑定到powers列表。...p模板输入变量每次迭代不同power; 您使用插值语法显示其名称。 与ngModel双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...名称输入必需,清除它将框轮廓变为红色。 这说明有些事情用户不知道什么,或者该怎么做。 利用控件状态来显示有用消息。...在这个例子,当控件有效或者原始时候隐藏消息 - “pristine”意味着用户没有改变这个值,因为它是以这种形式显示。 用户体验开发者选择 有些开发人员希望消息始终显示

    17.5K30

    Angular教程】-组件初识|8月更文挑战

    应为angular项目创建时候默认初始化了git仓库,我们这会儿可以看到还有一个文件有变化,那就是app.module.ts,打开文件后我看就看到了新创建组件已经自动挂载到了全局app上。...我们要将组件显示到app里面: 启动项目**ng serve --open**就可以看到页面显示**hello-world works...@Inout()装饰器来接收数据,通过@Output装饰器来派发数据来达到双向数据流通 组件ts代码(代码来自angular中文网): export class SizerComponent {..."不显示" : "显示" }} Hello World NgFor(内置): 给组件ts添加属性: public list: Array...,要不然功能无法实现 此时页面恢复正常,通过输入框更新内容,页面绑定数据同时更新 管道 angular管道与Vue过滤器雷同,均可以使数据指定格式进行显示,同样使用管道符来操作 内置管道

    1.9K20

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

    现成示例(查看源代码)演示了本指南中描述所有语法和代码片段。 模板HTML HTMLAngular模板语言。 几乎所有的HTML语法都是有效模板语法。...{{1 + 1}}内插大括号包围模板表达式1 + 1.在下面的属性绑定部分[property] =“expression”,模板表达式显示符号右侧引号。...这个规则对Angular“单向数据流”策略必不可少。您不必担心读取组件值可能会改变一些其他显示值。这个视图整个渲染过程应该是稳定。...以下代码目标属性图像元素src属性。... 许多情况下插值属性绑定较为方便替代品。 将数据值呈现为字符串时,没有技术上理由去选择另一种形式,插值更可读。

    5.2K10

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

    虽然根模块可能小应用程序唯一模块,大多数应用程序都有更多功能模块,每个模块都是专用于应用程序域,工作流程或紧密相关一组功能一致代码块。...模板最后一,标签一个自定义元素,代表一个新组件HeroDetailComponent。...自定义组件与原生HTML相同布局无缝混合。 元数据 ? 元数据告诉Angular如何处理一个类。 回顾HeroListComponent代码,你可以看到它只是一个类。...要告诉Angular HeroListComponent一个组件,请将元数据附加到该类。Dart,您可以使用注解附加元数据。...建筑外包你必须添加元数据到你代码,以便Angular知道该怎么做。 数据绑定 如果没有框架,您将负责将数据值推送到HTML控件,并将用户响应转化为操作和值更新。

    7.9K30
    领券