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

Angular Material 2:编辑记录后如何刷新md表?

Angular Material 2是一个开发框架,用于构建现代化的、响应式的Web应用程序。它基于Angular框架,并提供了一套丰富的UI组件和工具,用于创建美观、易于使用的用户界面。

在Angular Material 2中,如果要在编辑记录后刷新md表格,可以采取以下步骤:

  1. 首先,确保你已经正确地绑定了数据到md表格上。这可以通过将数据存储在一个数组中,并使用数据绑定将其传递给md表格的dataSource属性来实现。
  2. 当你编辑记录时,更新相应的数据对象。这可以通过监听编辑事件或使用表单控件来实现。
  3. 在数据对象更新后,调用md表格的renderRows()方法来刷新表格。这将重新渲染表格,并显示更新后的数据。

以下是一个示例代码片段,展示了如何在Angular Material 2中实现编辑记录后刷新md表格的过程:

代码语言:txt
复制
import { Component, ViewChild } from '@angular/core';
import { MatTable } from '@angular/material/table';

@Component({
  selector: 'app-table',
  template: `
    <table mat-table [dataSource]="data">
      <!-- 表格列定义 -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let record">{{ record.name }}</td>
      </ng-container>
      <ng-container matColumnDef="age">
        <th mat-header-cell *matHeaderCellDef>Age</th>
        <td mat-cell *matCellDef="let record">{{ record.age }}</td>
      </ng-container>

      <!-- 表格行定义 -->
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let record; columns: displayedColumns;"></tr>
    </table>
    <button (click)="editRecord()">Edit Record</button>
  `,
})
export class TableComponent {
  @ViewChild(MatTable) table: MatTable<any>;

  data = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
    { name: 'Bob', age: 35 },
  ];

  displayedColumns = ['name', 'age'];

  editRecord() {
    // 编辑记录的逻辑,更新数据对象
    // ...

    // 刷新表格
    this.table.renderRows();
  }
}

在上述示例中,我们使用了Angular Material的MatTable组件来展示数据,并通过@ViewChild装饰器获取了对表格的引用。在editRecord()方法中,我们可以执行编辑记录的逻辑,并在更新数据对象后调用this.table.renderRows()来刷新表格。

这样,当你编辑记录后,md表格将会重新渲染,并显示更新后的数据。

对于Angular Material 2的更多信息和详细介绍,你可以访问腾讯云的相关文档和官方网站:

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

相关·内容

Angular 6正式版发布,都有哪些新功能

学习更多关于如何使用ng update , 开始学习如何创建您自己的 ng update 语法,可以参考 rxjs 的 package.json 的入口,它关联了 collection.json。...Angular Material + CDK 组件 最值得一提的是用于显示分层数据的树形控件,遵循数据组件的模式,CDK 包含树的核心指令,而 Angular Material 则提供与顶层的 Material...class MyService { constructor() { } } 动画性能提升 更新,以后将不再需要网页动画 polyfill。...关于如何从 RxJS 5.5 迁移到 6 ,可以查看下面的链接资料: https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md 长期支持(...如何更新到 Angular 6.0.0 读者可以访问 update.angular.io 来得到升级应用的信息和指导。

4.2K20

Angular v18 现已推出!

在处理了开发人员的反馈并完善了我们的 Material 3 组件,我们很高兴将它们升级为稳定版!...与此同时,我们还用新的 Material 3 主题和文档刷新material.angular.io。您可以在我们的指南中找到如何在您的应用程序中使用 Angular Material 3!...从 v18 开始使用事件调度,Angular 将开始记录用户事件。一旦应用程序被水化,事件调度就会重播它们,我们最终在购物车中有六件商品。...CDK 和 Material 中的水合作用支持在 v17 中,一些 Angular Material 和 CDK 组件被选择退出水合,这导致了它们的重新渲染。...在过去的 6 个月中,我们从人们那里收集了更多反馈,并完善了更新体验,使每个人都能够迁移到新的构建体验并获得编辑/刷新提升。您可以在我们的更新指南中找到我们开发的工具,以自动执行更新体验。

8510

Angular 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

我们的承诺是:未来,所有新报告的问题都将在 2 周内完成分类。...它们提供了健壮易读的 API 表面,可以帮助大家更好地测试 Angular Material 组件。...有关这些 API 和其他新特性的更多细节和示例,请务必查看 Angular Material Test Harnesses 的文档: http://material.angular.io/cdk/test-harnesses...所有这些都无需刷新整个页面。输入表单的数据以及滚动位置都会保持原样,从而提高了开发人员的工作效率。 更快的构建 通过对一些关键领域所做的更新,我们带来了更快的开发和构建周期。...如何获取版本 11 更新 当你准备好时,请运行以下命令来更新 Angular 和 CLI: ng update @angular/cli @angular/core 可以前往 update.angular.io

3.3K30

Angular6自定义表单控件方式集成Editormd

曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成下这款markdownpad编辑器玩,在网上也只找到一篇通过指令集成的,虽然可以实现,但还是希望能做成组件形式的,之后看到一篇自定义组件的文章...,了解到ControlValueAccessor才真正完成这个心愿,现在记录分享与诸公。...表单控件更新的函数(即,设置当控件接收到 change 事件,调用的函数) registerOnTouched:用来获取通知用户正在交互的函数(即,设置当控件接收到 touched 事件,调用的函数...this.editormdConfig : new EditorConfig(); // 监听编辑器加载完成事件处理,由于该编辑器的配置特性,只能提前写好传入。... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.md的Markdown编辑器,支持NgModel

5.2K20

Angular 英雄编辑

ngOnInit 是一个生命周期钩子(lifecycle hook),Angular 在创建完组件很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。...使用 UppercasePipe 进行格式化 把 hero.name 的绑定修改成这样: {{hero.name | uppercase}} Details 对浏览器进行刷新。...Angular 发布了一些内置管道,当然你还可以创建自己的管道。 编辑英雄 用户应该能在一个  文本输入框(textbox)中编辑英雄的名字。...AppModule Angular 需要知道如何把应用程序的各个部分组合到一起,以及该应用需要哪些其它文件和库。 这些信息被称为元数据(metadata)。...你可以编辑英雄的名字,并且会看到这个改动立刻体现在这个输入框上方的  中。 声明 HeroesComponent 每个组件都必须声明在(且只能声明在)一个 NgModule 中。

2.5K50

Angular 英雄编辑

ngOnInit 是一个生命周期钩子(lifecycle hook),Angular 在创建完组件很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。...使用 UppercasePipe 进行格式化 把 hero.name 的绑定修改成这样: {{hero.name | uppercase}} Details 对浏览器进行刷新。...Angular 发布了一些内置管道,当然你还可以创建自己的管道。 编辑英雄 用户应该能在一个  文本输入框(textbox)中编辑英雄的名字。...AppModule Angular 需要知道如何把应用程序的各个部分组合到一起,以及该应用需要哪些其它文件和库。 这些信息被称为元数据(metadata)。...你可以编辑英雄的名字,并且会看到这个改动立刻体现在这个输入框上方的  中。 声明 HeroesComponent 每个组件都必须声明在(且只能声明在)一个 NgModule 中。

2.6K70

Angular 10 正式发布,不再支持 IE910!

这是跨越整个平台(包括框架、Angular Material 和 CLI)的一次主要版本更新。这次的新版发布间隔比以往短一些。自我们发布 Angular 9.0 版以来只过去了四个月。...我们尝试每年发布两个主要版本,以使 Angular 与其他 JavaScript 生态系统保持同步,并给出可预测的时间。我们计划在今年秋天发布 v11 版。...新版内容 新的日期范围选择器 Angular Material 现在提供了一个新的日期范围选择器。 ?...file=src%2Fapp%2Fdate-range-picker-overview-example.html 更多细节请查阅 date range selection: https://next.material.angular.io...http://v10.angular.io/guide/deprecations 如何更新到 v10 版本 请访问 update.angular.io 以获取详细信息和指导。

2.5K20

Angular 11 正式发布,放弃对IE 9、10的支持!

2Angular 11.0.0 放弃了对 IE 9 、10 和IE移动版的支持。IE11是目前唯一一个仍由Angular支持的IE版本。...(2) 字体自动内联(Automatic Inlining of Fonts) 在编译期间,Angular CLI 将自动下载字体,并关联到相关应用中,使得应用程序更快速。...(3) 组件测试套件 (Component Test Harnesses) 在 Angular v9 中,增加了开发人员可在测试期间使用支持的 API 与 Angular Material 组件交互的方法...(5) 更新语言服务预览(Updated Language Service Preview) 语言服务从当前的基于视图引擎逐渐转变 , 更新的语言服务为开发人员提供了更强大、更准确的体验。...blob/master/CHANGELOG.md 如果你想现在就尝试下新版本,升级到 Angular 11.0.0 ,可以执行以下命令: ng update @angular/cli @angular/

1.9K20

【前端技术丨主题周】Angular 核心概念与框架演进

2 . 指令与组件 在Angular 中,指令是一个极其重要的概念。指令可以为特定DOM 元素添加新的行为特征,从而扩展元素的功能。...一个博客模块的组件树例子 变化监测是Angular 在应用的数据变化,用于决定哪个组件需要随之刷新的机制。 3 ....在此之上,还有不少其他的外部工具库,类似于: Angular Material,Google 官方的Material 设计风格的UI 组件库。...除了上面提到的Material Design UI、Mobile Toolkit,还包括: Kendo UI、Onsen UI 2 等UI 库,提供了多样化的界面方案选择。...ionic2、NativeScript、React Native 等移动端技术,用来开发跨平台的混合或原生应用。 Meteor 等框架,可以用来实现JavaScript 全栈式开发和高效整合。

9K10

Docsify+腾讯云对象存储 COS,一键搭建云上静态博客

客户端编辑 README.md 就能更新主页内容,当然也可以添加更多页面。...每次编辑刷新浏览器页面就能实时看到更新的文档内容。 但如果想要更新 CDN 缓存,则需要去 CDN 控制台 对该 url 进行刷新。...知识补充 1、COSBrowser 如何进行文件恢复(找回历史文件)? COSBrowser 客户端编辑窗口有一个小小的【时钟】按钮,点击该按钮可打开编辑器历史。...但是该功能仅帮您保存最近 100 次所有文档编辑记录。 4.png 若需要 COS 帮您自动保存副本,则可以开启存储桶的版本控制功能。...2如何把截图上传到 COSBrowser? 您可以使用其他工具的快捷键在屏幕里截图,截好的图会自动存在剪辑版中。

2.2K20

听我说说我的博客: 月访问量过万的个人IT博客的技术史

我的博客是如何工作的? HTTP服务器 当你开发在网页上访问我的博客的时候,你可能会注意到上面的协议是HTTPS。 但是并不会察觉到它是HTTP2.0。...Angluar & Material Design Lite vs Bootstrap & jQuery Mobile 这是一个现代浏览器的前端战争。...接着,在我遇到了Backbone,响应了下Martin Folwer的编辑-发布分离模式。用Node.js与RESTify直接读取博客的数据库做了一个REST API。...微信编辑器 作为下一个项目,我开始打算去做一个微信编辑器。一方面可以给我的女朋友用,她正在我们公司实习——新媒体运营。...+ ngCordova Cordova highlightjs showdown.js(Markdown Render) Angular Messages + Angular-elastic 微信端

1.6K100
领券