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

如果在angular 6中将一个div从列中删除,如何将现有div从一列推送到另一列

在Angular 6中,如果要将一个<div>从一列推送到另一列,你可以使用Angular的数据绑定机制来实现。以下是一种可能的解决方案:

  1. 首先,在组件的模板中,你需要定义两个列,每个列都包含一个<div>元素用于显示内容。你可以使用CSS的flex属性来创建列布局。
代码语言:txt
复制
<div class="column">
  <div *ngFor="let item of column1Items">{{ item }}</div>
</div>

<div class="column">
  <div *ngFor="let item of column2Items">{{ item }}</div>
</div>
  1. 在组件的类中,你需要定义两个数组属性column1Itemscolumn2Items,分别用于存储列1和列2中的元素。
代码语言:txt
复制
export class YourComponent {
  column1Items: string[] = ['Item 1', 'Item 2', 'Item 3'];
  column2Items: string[] = [];

  moveItemToColumn2(item: string) {
    // 从列1移除指定的元素
    const index = this.column1Items.indexOf(item);
    if (index !== -1) {
      this.column1Items.splice(index, 1);
    }

    // 将元素添加到列2
    this.column2Items.push(item);
  }
}
  1. 然后,你需要在模板中添加一个按钮或其他交互元素,以触发将<div>从一列推送到另一列的操作。当点击该按钮时,调用组件类中的moveItemToColumn2()方法,并传入要移动的元素。
代码语言:txt
复制
<button (click)="moveItemToColumn2('Item 1')">Move Item 1</button>

以上代码是一个简单示例,仅展示了如何在Angular 6中实现将一个<div>从一列推送到另一列的功能。你可以根据自己的需求进行扩展和修改。

请注意,腾讯云提供了一系列云计算相关的产品和服务,可以根据具体情况选择适合的产品。你可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多信息。

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

相关·内容

从零开始学 Web 之 移动Web(七)Bootstrap

一、常见的响应式框架 随着Web应用变的越来越复杂,在大量的开发过程我们发现有许多功能模块非常相似,比如轮播图、分页、选项卡、导航栏等,开发往往会把这些具有通用性的功能模块进行一系列封装,使之成为一个个组件应用到项目中...如果一“行(row)”包含了的“(column)”大于 12,多余的“(column)”所在的元素将被作为一个整体另起一行排列。... 解释:上面四个div如果在超小屏幕上就 100%显示(占12栅格);在小屏幕上...2.Row可以再次嵌套在。如果不能填满整列,则默认左排列,如果超出,则换行展示。 5、排序 col-xs-offset-n:往右偏移 n 个栅格,但是会影响后面所有元素也偏移 n 个栅格。...(内部实现原理通过定位实现) 6嵌套 嵌套就是还可以嵌套行,注意不能嵌套版心 container 和 container-fluid。

5.6K30

angular浏览器兼容性问题解决方案

,非常简单,将表格的一设置成绝对定位,在设置了绝对定位后,该会脱离原来的文档流,表格少了一,所以需要加一个背景板来保证表格能够给这个固定留出一个位置。...HTML代码大致如下,这个fixed-col可以为固定的样式,也可以设置成背景板的样式,demo是用其指定了固定的样式。...此时需要删除原来的页脚,可通过: ::ng-deep .ant-calendar-footer-btn { display: none; } 这种方式删除默认页脚,此时额外的页脚不可使用绝对定位。...解决方案: 使用表单的reset()重置表单,但是重置的操作需要放在setTimeout,或者通过其他手段将重置的操作作为表单初始化时的最后一个宏任务执行。...根据angular团队所说,这个插件修复了一个IE10或者IE11的bug,但是提交了太多的代码,这会给增加现有的应用的打包体积,虽然后面关于这个PR讨论了挺久,但是看样子是准备把这个放到FAQ里面,而不会把他并入框架

3K30
  • bootstrap笔记(五)——栅格参数

    如果在没有范围的设备下都是显示一行,只有在使用了栅格参数表明的情况下才会显示对应的结果 总结:所以一行可以用到xs,sm,md,l来调整在不同设备下的结果,这个时候就必须用到栅格参数。...如:在md下显示一行3,sm下显示一行4 栅格参数 也说明在md下占据(12的)3,在sm下占据(12的)4。...如: 栅格参数 表示的含义:一行为12,在md一行中将会显示1个 占据有着3个单元格的一 上述的实现必须在容器内的实现,容器内包括行。...个单元格 col-sm-4 如果是超小屏幕 一行显示2 说明每一将占据6个单元格 col-xs-6 分析:首先在四个要求中有lg是要有6的,所以一行中有6col-lg-2。...xs下有2,所以前2都有col-xs-6 col-lg/md/sm/xs-数字:数表示在一行12当中所占的数。 <!

    1.5K40

    PostgreSQL 教程

    左连接 从一个表中选择行,这些行在其他表可能有也可能没有对应的行。 自连接 通过将表与自身进行比较来将表与其自身连接。 完全外连接 使用完全连接查找一个另一个没有匹配行的行。...主题 描述 插入 指导您如何将单行插入表。 插入多行 向您展示如何在表插入多行。 更新 更新表现有数据。 连接更新 根据另一个的值更新表的值。 删除 删除的数据。...连接删除 根据另一个的值删除的行。 UPSERT 如果新行已存在于表,则插入或更新数据。 第 10 节....添加 向您展示如何向现有表添加一或多删除 演示如何删除表的。 更改数据类型 向您展示如何更改的数据。 重命名列 说明如何重命名表的一或多。...CAST 从一种数据类型转换为另一种数据类型,例如,字符串转换为整数,字符串转换为日期。 第 16 节.

    55210

    如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

    您或您的应用程序发出包含的查询时WHERE声明,MySQL逐行读取每的每个条目,这可能成为一个资源密集程度极高的过程,因为您的表累积了越来越多的条目。...索引像这样的获取数据并按字母顺序存储在一个单独的位置,这意味着MySQL不必查看表的每一行。它只需要在索引中找到您要查找的数据,然后跳转到表的相应行。...每当用户提交此表单时,findaddress.php向fetchaddress.php发送一个要求,然后数据库检索相应的映射代码。...第6步 - 添加事件监听器 向应用程序添加交互元素有助于保持用户的参与。我们将通过使用事件侦听器在此应用程序实现一些交互行为。 一个事件是发生在网页上的任何行动。...常见事件的例子有: 单击HTML按钮 更改输入字段的内容 将焦点从一个页面元素更改为另一个页面元素 一个事件监听器是一个指令,它讲述了一个程序在特定事件发生采取某种行动。

    13.2K20

    Jump Start Bootstrap 第2章

    创建动态布局 让我们看看如何将网格系统付诸实践,创建一个动态布局,以适应它所被查看的设备的大小。 假设我们使用Bootstrap创建一个博客的布局;我们给出了它的桌面显示线框图,如图所示 ?...相反,我们将直接将这些附加到现有的行。你可能想知道我们怎么能有24(6在每一行跨越4个引导)。嗯,Bootstrap只允许在一行中使用12个引导。...这样,在每一行,我们只得到两(2x6格=12格)。但这里只有一行。因此,一旦所有的12个格都被占用,剩下的将出现在下一行,每次创建一个新的行。...嵌套 你可以在布局任意创建一套新的12格Bootstrap网格。这可以通过在一个现有构建一个新的行元素来完成,然后用自定义的填充这一行。...偏移(Offsetting Columns) 偏移,是Bootstrap网格系统的另一个大功能。它通常用于增加一个的左边缘。如果你有一个要显示在三格之后,你可以使用偏移功能。

    2.9K40

    【CSS】343- CSS Grid 网格布局入门

    grid-template-rows 属性允许我们指定网格的行数及行的高度。那么你应该猜到另一个属性是干什么的了。...例如,如果在网格容器设置这个规则:grid-template-rows: 2fr 3fr,那么你的网格容器将首先被分成 2 行。然后将数字部分加在一起,这里总和为 5, 即 5 等分。...网格线编号,网格单元格,网格轨道 网格线是存在于和行每一侧的线。一组垂直线将空间垂直划分成,而另一组水平线将空间水平划分成行。...这意味着在我们之前的例子,有四条垂直线和四条水平线包含它们之间的行和。 ? 在将网格项从一个位置跨越到另一个位置时,网格线变得非常有用。 网格轨道是两条线之间的空间。网格轨道可以是一行或一。...定位网格项 我采取了前面的例子的网格,并用数字1到9标记每个单元格,而不是X或O,下面是它的样子: ? 假设我想将第 6 个框移到第 2 个框的位置。

    1.9K10

    ASP.NET MVC 5 - 给电影表和模型添加新字段

    Code First Migrations将会在Migrations文件夹创建另一个类文件 (文件名为: {DateStamp}_Initial.cs ),此类包含的代码将创建数据库的Schema。...你看到这个错误,因为更新的的Movie模型类中比现在Movie现有数据库表的schema不同。 (在数据库表没有Rating。) 有几个解决错误的方法: 1....不足之处,你将失去现有的数据库的数据 - 所以对生产数据库你不想使用这种方法! 通常是一个富有成效的办法,开发一个应用程序来初始化数据库的自动测试数据。...在本教程,我们将使用Code First Migrations方法。 更新Seed 方法,以使它可以给新提供一个值。...ASP.NET MVC 5 - 将数据控制器传递给视图 5. ASP.NET MVC 5 - 添加一个模型 6.

    2.4K80

    AngularDart4.0 指南- 表单 顶

    创建一个基本的表单 一个Angular表单有两个部分:一个基于HTML的模板和一个组件类,以编程方式处理数据和用户交互。 课程开始,因为它简要地说明了英雄编辑可以做什么。...你会看到一个样式化的表单! 使用* ngFor添加powers 英雄必须从一个固定的机构批准的权力列表中选择一个超级大国。 您在内部维护该列表(在HeroFormComponent)。...现在运行应用程序并输入名称输入,添加和删除字符。 您会看到这些字符出现在诊断文本并消失。 在某个时候,它可能看起来像这样: ? 诊断结果表明数值确实是输入流向模型,再返回。...靠近表单顶部的诊断确认所有的更改都反映在model模板删除诊断绑定,因为它已经达到了目的。 根据控制状态给出视觉反馈 使用CSS和类绑定,您可以更改表单控件的外观以反映其状态。...临时将另一个名为spy的模板引用变量添加到Name 标记,并使用它显示输入的CSS类。

    17.5K30

    Asp.Net MVC4入门指南(7):给电影表和模型添加新字段

    在Movies.mdf文件上右键单击,并选择删除删除电影数据库。 ? Build应用程序,以确保没有任何编译错误。 工具菜单上,单击库包管理器,然后点击程序包管理器控制台. ?...下一步是创建一个DbMigration类,用于初始化数据库迁移。此迁移类将创建新的数据库,这也就是为什么在之前的步骤你要删除movie.mdf文件。...Code First Migrations将会在Migrations文件夹创建另一个类文件 (文件名为: {DateStamp}_Initial.cs ),此类包含的代码将创建数据库的Schema。...打开\Views\Movies\Index.cshtml文件,在Price后面添加Rating的头。然后添加一个来显示@item.Rating的值。...你现在看到此错误,因为在应用程序,最新的Movie模型类和现有的数据库Movie表的Schema不同。(数据库表,没有Rating。)

    2K100

    【CSS】253- 原型图到成品:步步深入 CSS 布局

    第二步:沿着各个单元画方框 画一些方框把这些元素框起来,看看行和是否初具规模。我们把方向一致的单元归到同一个方框。 ? 在页面的 HTML 元素基本上都可视为矩形。...article 标签代表文章类内容,而你可以认为文这种东西有点类似于一篇文章。 p 标签代表段落,而文的内容文本有点类似于一个段落。...Flexbox 的原理 CSS 的 Flex 布局能够把元素以行或者的形式排布。这是一种单向的布局系统。为了实现交叉的行和(正如文组件的设计那样),我们需要添加一些容器元素来扭转方向。 ?...在本例,我们会设置一些嵌套的 Flex 容器,让该成行的成行,该成的成。 我们把外层容器(绿色方框)设置为,蓝色方框设置为行,而红色方框的元素排布在。 ?...当布局主要是行或者主要是时,Flexbox 布局的表现更出色。 另一个重点就是,即使 Grid 布局比 Flexbox 布局年轻,前者也撼动不了后者的地位。

    4.4K51

    Ng-Matero v15 正式发布

    前言 Angular 按照既定的发版计划在 11 月中旬发布了 v15 版本。推迟了一个月(几乎每个版本都是这个节奏),Ng-Matero 也终于更新到了 v15。... 0 到 5k 用了两年,而 5k 到 1w 只用了半年。 本文主要聊一下 Ng-Matero 升级 v15 时遇到的一些问题及感触。同时也简单说一下近期在 v14 中新增的几个功能。...另外,侧边栏菜单按钮使用语义化标签进行了优化,关于按钮的选择可以参考 Angular Material 在 Button 文档的说明: Angular Material 使用原生的 ...使用 CSS 很难做到这一点,一般的 CSS 都是 12 或者 24 栅格,无法随意设置栅格的数。...class="col-sm-6 col-md-3 col-xl-2"> 总结 这篇文章是本年度的第一篇文章,也是最后一篇,说来真是惭愧。

    5.5K40

    盒模型

    可以将侧边栏改为宽26%,两能够并排放下,但是这种方式不可靠。 魔术数值不是一个理想的值,而是通过改样式试出来的值。在编程不推荐魔术数值,因为往往难以解释一个魔术数值生效的原因。...,就可能会因此破坏其中一些组件的布局,尤其是当第三方组件在开发 CSS 的过程没有考虑到使用者会修改盒模型时。...,它会自然地填充容器的宽度 如果在右边加上负外边距,则会把它拉出容器。...这是用户代理的样式表添加的,但当前后叠放两个段落时,它们的外边距不会相加产生一个 2em 的间距,而会折叠,只产生 1em 的间隔。 折叠外边距的大小等于相邻外边距的最大值。...因为侧边栏是主的相邻兄弟元素,所以它也会有顶部外边距。因此要将其恢复为 0,还需要给主补上内边距。

    1.9K20

    70个NumPy练习:在Python下一举搞定机器学习矩阵运算

    答案: 4.如何1维数组中提取满足给定条件的元素? 难度:1 问题:arr数组中提取所有奇数元素。 输入: 输出: 答案: 5.在numpy数组,如何用另一个值替换满足条件的元素?...输入: 输出: 答案: 12.从一个数组删除存在于另一个数组的元素? 难度:2 问题:数组a删除在数组b存在的所有元素。 输入: 输出: 答案: 13.获取两个数组元素匹配的索引号。...难度:3 问题:过滤具有petallength(第3)> 1.5和sepallength(第1)<5.0的iris_2d的行。 答案: 35.如何numpy数组删除包含缺失值的行?...难度:2 问题:将iris_2d的花瓣长度(第3)组成一个文本数组,如果花瓣长度为: <3则为'小' 3-5则为'' '> = 5则为'大' 答案: 41.如何numpy数组的现有创建一个新的...URL='https://upload.wikimedia.org/wikipedia/commons/8/8b/Denali_Mt_McKinley.jpg' 答案: 61.如何从一个numpy数组删除所有缺失的值

    20.7K42

    HTML5 拖放API与Vue.js实战

    = true; 拖动元素的目的是将数据页面的一个部分传输到另一部分。...这里的 app state 将存储在 App 组件,然后可以作为 props 向下传递到 Column 组件。另一方面,组件在渲染时会将所需的 props 传递给卡片组件。...用户应该能够按照卡片中的活动进度将卡片从一拖到另一。所以可拖动组件应该是 Card 组件,而放置目标是 Column 组件。...在这三个事件,第一个被触发的是 dragenter *,*当可拖动元素被拖到时会立即被触发。...moveCardToColumn 函数做了三件事:找到卡偏先前所在的取出卡片,最后把卡片加到新。 完成看板 现在我们已经实现了拖放功能,最后只剩下添加卡片的功能了。

    4.3K10

    数据操纵:SELECT, INSERT, UPDATE, DELETE

    391 392 如果在一个表达式 tbl_name 访问一个,UPDATE 使用的当前值。...475 476 MySQL 4.0 开始,在 DELETE 语句中可以指定多个表,用以从一个删除依赖于多表的特殊情况的记录行。...539 540 使用 LOCAL 将比让服务器直接访问文件要慢一些,因为文件的内容必须客户端主机传送到服务器主机。而在另一方面,你不再需要有 FILE 权限用于装载本地文件。...INTO OUTFILE 和 LOAD DATA INFILE 将数据从一个数据库写到一个文件,然后再从文件中将它读入数据库时,两个命令的字段和行处理选项必须匹配。...否则 MySQL 不知道如何将输入字段与表匹配。 693 694 如果一个行有很少的字段,没有输入字段的将被设置为缺省值。

    2.3K20
    领券