在Angular中使用Mat表中的NgFor
是指在使用Angular Material库中的表格组件时，通过NgFor指令来动态生成表格的行。
NgFor是Angular中的一个内置指令，用于循环遍历一个集合，并为集合中的每个元素生成相应的HTML元素。在使用Mat表格时，可以通过NgFor指令来遍历数据集合，并为每个数据项生成表格的行。
使用Mat表格的NgFor的步骤如下：
- 导入MatTableModule模块： 在使用Mat表格之前，需要先导入MatTableModule模块。可以在Angular模块的imports数组中添加MatTableModule，以便在组件中使用Mat表格。
- 定义数据集合： 在组件中定义一个数据集合，该集合包含要在表格中显示的数据项。
- 在HTML模板中使用Mat表格： 在HTML模板中，使用Mat表格组件，并通过NgFor指令来遍历数据集合。可以使用MatHeaderRowDef指令来定义表格的表头行，使用MatRowDef指令来定义表格的数据行。
- 示例代码如下：
- 示例代码如下：
- 在上述示例中，使用了两个列（name和age），并通过NgFor指令遍历数据集合data，为每个数据项生成表格的行。
- 定义列和数据源： 在组件中定义列和数据源。可以使用MatTableDataSource来包装数据集合，并将其赋值给Mat表格的dataSource属性。
- 示例代码如下：
- 示例代码如下：
- 在上述示例中，定义了一个数据集合data和列columns，并使用MatTableDataSource将数据集合包装成数据源。
通过以上步骤，就可以在Angular中使用Mat表格的NgFor来动态生成表格的行。在实际应用中，可以根据具体需求进行样式和功能的定制，例如添加排序、过滤等功能。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库MySQL版（TencentDB for MySQL）。
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos 腾讯云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
相关·内容
在我的代码中，我可以迭代no。表，但问题是列号。并且它的名称对于所有被迭代的表都是相同的。我怎么才能修复它？'mat-table-lg' : 'mat-table-sm'}}" data-automation-attribute="div-results">
<mat-table #table*n
浏览 13提问于2019-05-22得票数 0
1回答
我正在从后端下载包含类别，名称和类别类型的对象类别。我想展示几个垫子，每个垫子对应不同的类型。当我显示所有类别时，我没有任何问题，但我想创建新的mat-table对象来单独显示表。控制台显示对象已正确创建，但未在HTML中显示-该位置为空 displayedColumns: string[] = ['position', 'name', 'watki', 'id'];
categories"
浏览 14提问于2019-04-27得票数 0
2回答
获取错误为TypeError:无法读取未定义的行号mat表的属性“列” import {Component, ElementRef, OnInit, ViewChild} from});
create= function () {要在表中显示值，我使用下面的代码
浏览 3提问于2017-12-01得票数 1
2回答
我正在尝试导入excel工作表并以表格格式显示它，我的意思是我想要根据excel表的角度来动态创建表格。例如，在上传工作表时，我以数组的形式获取数据，Name: "Ram"Roll No: "10001"Sr No: 11:Name但是，如何使用这些头动态地形成表。如果我上传不同的</em
浏览 3提问于2020-06-18得票数 0
回答已采纳
3回答
我试图在html页面中生成mat-form-field的动态编号。中，我循环如下： <div class="deposit-box" *ngFor="let c of data"> <mat-form-field appearance="outline"
浏览 0提问于2018-12-11得票数 1
回答已采纳
我传入一个对象作为我的值，并且需要使用ngValue而不是值。，这里提供了我的错误：https://stackblitz.com/edit/angular-5wk4rl?If 'mat-option' is an Angular component and it has 'ngValue' input, then verify that
it is part of正如在堆栈上的其他答
浏览 13提问于2019-06-29得票数 1
回答已采纳
1回答
我想在Angular中显示先前通过<mat-select>选择的mat表用户角色。当我通过一个普通的<select>操作时，一个新的条目出现在表格中，但是菜单看起来很难看。<label>Role</label> <option *ngFor="let element of
浏览 10提问于2021-05-16得票数 0
我有两个选择；第一个是你在不同大洲之间选择的。第二个mat-select选项包含国家/地区选项。我的问题是，例如，如果我在第一个mat-select中选择亚洲作为我的选项，我只希望亚洲国家在第二个mat-select中显示为选项，而不是其他国家。*ngFor="let continent of formData" [value]="continent.Cont
浏览 43提问于2021-10-29得票数 0
回答已采纳
1回答
"name": "accounts" { } <th mat-header-cell *matHeaderCellDef mat-sort-header>Roles</th&g
浏览 3提问于2018-09-16得票数 0
标题: Angular 8-在angular材质的网格中显示图像。这些行是从表中检索的，但在显示时失败。
我收到错误:找不到类型为' object‘的不同支持对象&#
浏览 9提问于2019-11-14得票数 0
回答已采纳
3回答
ngModel未显示该值
、、、
在超文本标记语言中，它不会在已经分配了selectedValueModel的地方显示ngModel。 this.selectedValueModel = newValue }<mat-form-field>
<mat-s
浏览 4提问于2019-01-24得票数 2
1回答
我的组件看起来如下：import { Member} from '..).subscribe( this.members= member; ); }
我还没有弄清楚如何使用ngFor在材料表上显示我的对象。上的</
浏览 1提问于2019-03-25得票数 3
3回答
显然，您可以使用角度材质展开面板上的输入expanded来默认加载时打开的特定面板。但是，我有一个手风琴，其中所有的扩展面板都是动态生成的，并且都是可选的，但我希望打开第一个面板。我可以检查使用模板生成面板的每个ngFor，看看它是否存在，然后在第一个索引中添加属性，但有几个循环会引入模板，这看起来很混乱。我希望能够在视图完成后从mat-accordion中获取一
浏览 0提问于2018-10-26得票数 21
回答已采纳
FormControl(this.array); fc: this.fc, }); <mat-select formControlName="fc" placeholder="Test" multiple>
<mat-option*ngFor=
浏览 0提问于2019-07-15得票数 1
回答已采纳
1回答
我使用mat-select material和Angular5。我陷入了无法将值绑定到mat-select中的*ngfor的问题中。这些值是从rest API响应中获取的，我将其赋值给mat select中分配给ngfor的值。当我对其进行控制台操作时，我可以看到这些值，但是在html中，我无法获得该值。html
<<em
浏览 15提问于2018-06-01得票数 -2
2回答
如何在关闭angular材质中的多选下拉菜单时触发事件？这是我的HTML模板 <mat-select multiple <mat-option *ngFor="let option of templateOptions"[value
浏览 23提问于2019-08-26得票数 4
回答已采纳
基本上我是在更新我有用户信息的用户配置文件。其将被绑定到用户各自的字段上。FormControl(xxxx,[Validators.required]),在上面的代码中，我使用了formgroup和formcontrol。<mat-form-field fxFlex="49"> <mat-select pl
浏览 3提问于2018-12-12得票数 0
我希望在Angular v5中设置双向绑定，特别是使用Angular材质选择列表。我基本上有以下示例代码，它是一个HTML表的片段，并假设当呈现在屏幕上时，只会出现两行，即： <mat-option *ngFor="
浏览 3提问于2018-05-01得票数 0
{ "id": "2" { "id": "3"]
和* And一起使用MatSelect来迭代数组，并使用[(ngModel)]将当前状态与select绑定。
浏览 7提问于2018-07-27得票数 9
2回答
我刚接触angular，想要绑定angular材料表中的动态数据，表将会生成，但数据不会显示。我的ts文件import { BlogService } from '../..<ng-container [matColumnDef]="col" *ngFor=
浏览 4提问于2019-02-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
