Ho在*ngFor mat表中使用ngIf隐藏列/截断单元格内容
在*ngFor mat表中使用ngIf隐藏列/截断单元格内容，可以通过以下方式实现：
- 隐藏列：
- 在*ngFor循环中，使用ngIf指令来判断是否显示该列。
- 在表头中，使用ngIf指令来判断是否显示该列的表头。
- 示例代码：
- 示例代码：
- 截断单元格内容：
- 使用CSS的文本截断属性（例如text-overflow: ellipsis）来截断单元格内容。
- 示例代码：
- 示例代码：
- 示例代码：
以上是在*ngFor mat表中使用ngIf隐藏列/截断单元格内容的方法。对于更多关于Angular Material表格的用法和相关知识，可以参考腾讯云的产品介绍页面：Angular Material。
相关·内容
1回答
如何在表单元格中添加多个值？
angular、angular-material
我目前有一个材料表如下：
<table mat-table [dataSource]="blogPosts">
<!-- Title Column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef>Title</th>
<td mat-cell *matCellDef="let element">{{ element.title }}</t
浏览 1提问于2018-11-19得票数 0
回答已采纳
1回答
这两种角度数据表的区别是什么？
angular、datatable、angular-material
我打算设计一个动态角度数据表。因此，我定义了一个名为displayedColumns的数组，并用列名填充它。然后，我用适当的数据填充了dataSource，一切都准备好了。
首先，我测试了静态列名，一切都很好。
然后我试图使数据表变得动态。我使用displayedColumns作为列名数组，而不是使用position列进行测试，而且一切都很好，并且收到的结果与生成的第一段代码相同。
但是，当我决定用数组和索引替换所有其他列时，就会产生混淆，当我这样做时，它会产生一个错误！
下面是我的第一个代码：
<table mat-table [dataSource]="this.da
浏览 0提问于2019-07-16得票数 1
回答已采纳
2回答
Mat-表格中的Mat-表格显示每个记录的额外行收件箱x
angular、angular-material
我在一个Mat-Table中实现了一个Mat-Table。显示的数据是正确的。但是，对于父行的每一行，它在Mat-Table中显示一个额外的空行。由于我无法追踪这个错误，我在这个论坛上寻求帮助。请帮帮忙。
HTML代码如下所示。
<div class="mat-elevation-z8">
<table mat-table [dataSource]="listData" class="mat-elevation-z8" matSort multiTemplateDataRows width="100%&#
浏览 0提问于2018-10-15得票数 1
1回答
角度，在角材质表中用“查看更多”按钮切换文本。
javascript、html、angular、angular-material
我已经实现了这个函数来切换描述，当用户单击“查看更多”时，它将显示完整的描述。，但问题是，它同时切换它们。
这就是我在html文件中拥有的内容：
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a p
浏览 5提问于2021-11-16得票数 0
回答已采纳
1回答
角质材料.工作台骨架占位符
angular、html-table、angular-material2
我试图使用骨架占位符在我的角度6+材料项目无处不在。我一直在使用<table>，因为我不知道在数据尚未加载时如何使用占位符(下面的示例图像)：
我用的是
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="le
浏览 0提问于2018-07-11得票数 5
1回答
筛选表中的特定列
html、angular、typescript、angular-material、angular-material-table
我需要过滤一个表，特别是一些列，这必须通过下拉，在表中完成。标记为红色的3列，我希望它们分别被过滤，也就是说，每个列都有一个下拉列表，可以被选择。
我给你看我的密码
HTML
<div>
<mat-toolbar *ngIf="dataSource.length===0" >
<span>No hay proyectos que mostrar</span>
</mat-toolbar>
<div class="table-container">
<table
浏览 1提问于2022-05-20得票数 0
1回答
角质材料表--多个粘性行
css、angular、typescript、angular-material
根据官方文档，我们可以对sticky中的sticky header行使用mat-table输入。但我需要做前三排的垫子桌是粘稠的。有什么办法吗？
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<t
浏览 1提问于2020-01-03得票数 2
回答已采纳
1回答
Ho在*ngFor mat表中使用ngIf隐藏列/截断单元格内容
angular、angular-material、mat-table
因此，我正在处理一个mat-table，我的问题是如何隐藏某个列(基于*ngIf)或截断超过50个字符的单元格内容(我有一个自定义管道)。 如果列名为xyz，则隐藏/截断。我不能想出一个方法，我是一个绝对的新手角度，任何指导将非常有帮助。提前感谢 displayedColumns: string[] = ['id','name'];
<ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
<th ma
浏览 32提问于2021-06-16得票数 1
回答已采纳
4回答
如果变量在材料角数据表中为真，则隐藏特定列。
javascript、angular、typescript
早上好，我有一个数据表，我通过消费api获取其中的数据，问题是我想根据变量的值隐藏同一表的一个特定列，在那里它的值将在身份验证中收集，以输入应用程序，但我想知道根据变量的条件，有什么方法可以隐藏数据表中的列。
我的代码
要隐藏的列是Com。Snmp
<div class="col-11 mx-auto">
<div class="search-div" >
<button class="btn btn-primary" (click)="onCreate
浏览 5提问于2019-10-21得票数 2
回答已采纳
2回答
在角材料表上显示嵌套JSON数据
json、angular、datatables、nested、angular-material
Json文件的格式如下-
{
"products": {
"items":[
{
"productId": "1",
"dept": "home",
"itemtype": "small"
},
{
"productId": "2",
"dept": "kitchen",
浏览 2提问于2020-03-10得票数 2
回答已采纳
1回答
可重复使用的棱角材料垫台
angular、angular-material
我有以下用于列出员工的Angular Material mat-table。我还有其他的表格，我需要转换成相同的样式和结构。如何将此Employee表组件化以供重用？使用像Material这样的组件库的重点是重用公共组件，我很难理解如何轻松地重用这个表。 <table mat-table matSort [dataSource]="employeeDisplayList" class="mat-elevation-z8 table">
<ng-container matColumnDef="selected">
浏览 24提问于2020-07-19得票数 0
回答已采纳
14回答
如何将垫子-桌柱的宽度设置为角？
html、css、angular、angular-material
在我的席表中有6列，当任何列没有更多的单词时，它看起来像Imag-1，但是当任何列都有更多的单词时，UI看起来就像Imag-2，那么当任何列都有角6中的更多单词时，如何设置UI类似于Imag-1？
图像-1
图像-2
user.component.html
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="userimage"
浏览 0提问于2018-10-27得票数 155
回答已采纳
1回答
角度材料表调整列的大小
angular-material
我试着在我的网页上用一个有角度的材料表格显示一些数据，但是视图看起来不是很好，我该怎么办？我想让可调整大小的列和数据放在正确的位置，而不是像那样和凌乱 这是我的HTML代码，它显示了整个数据 <mat-card>customer card</mat-card>
<div>
<mat-table [dataSource]="dataSource" class="mat-elevation-z8" class="table">
<!-- Position Column -->
浏览 18提问于2020-01-25得票数 2
回答已采纳
1回答
角表误差:找不到id为“.”的列
angular、angular-material
我正试图在我的页面中添加一个角度材料表。我通过component.ts文件中的http请求从Flask获取数据：
onLoading: boolean = true;
dataSource: any;
displayedColumns: string[] = ['inchiKey', 'schemblID', 'smiles', 'patentID']
constructor(private rs: RestService) { }
ngOnInit(): void {
this.getdataby
浏览 5提问于2022-06-29得票数 0
回答已采纳
3回答
在转角材料表中使用ngIf时的误差
angular、angular-material、angular-ng-if
需要一些帮助，在角材料表的问题。我将简单的数据传递给具有数据源的表，但我希望根据这些值评估数据源的值并在表中显示值。例如，请参见列因缘，它可以是值(1、2、3或4)，例如，如果它等于表中的1显示"Fraud“。
<h3>Lista casos</h3>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="idcaso">
<
浏览 6提问于2021-03-15得票数 0
1回答
角质材料垫--由属性构成的表行分组
javascript、html、angular、angular-material-table
我想用相同的ID在一行中显示数据。
数据：
{ "id"："700"，"desc"："Tempo"，"richiesta"："20220087"，"dataElab"："22/09/2022 06:00"，"valore"："13,8“}，{ "id"："700"，"desc"："Tempo"，"richiesta"："20220088"，"
浏览 3提问于2022-09-22得票数 0
5回答
如何将某些样式应用于角度材料表中的表行
javascript、angular、typescript、angular-material
我有一张桌子： <div class="table-container">
<table mat-table [dataSource]="dataSource">
<mat-divider></mat-divider>
<!-- title column -->
<ng-container matColumnDef="title">
<th mat-header-cell *ma
浏览 36提问于2019-10-14得票数 7
回答已采纳
1回答
角材料2表-使用TemplateRef和ngTemplateOutlet定义列
html、angular、angular-material2、angular-material-table
我正在尝试制作可重用的资料表，我想使用TemplateRef和ngTemplateOutlet来生成列。在示例中，我创建了使用cards组件的cards组件。在cards.component.html中，我有一个表列的模板。运行该项目将导致错误ERROR TypeError: Cannot read property 'template' of undefined (请参阅stackblitz上的控制台)。是否可以将列模板传递给我的MaterialTableComponent并使用它来定义列？
<table mat-table [dataSource]="dat
浏览 0提问于2018-10-15得票数 10
1回答
在使用“表-出口商”时无法找到属性“出口商”
html、angular
我正在编写一个报表页面，该页面根据用户输入的数据范围显示报表。报告是表格形式的，我想把它导出到excel和csv文件中。我使用的是 9，并试图使用将表数据导出到xls、csv。该指令针对不同的导出类型使用不同的导出服务。但是，我在html文件中得到了这样一个错误：“无法读取未定义的属性'exportTable‘”。你能帮我解决这个问题吗？
<h3 align="center">Payment Gateway Report</h3>
<div class="container-fluid" style="font-
浏览 1提问于2020-06-18得票数 2
回答已采纳
1回答
mat-分页器宽度与mat-table不对齐
html、css、angular、angular-material、material-table
我正在为我的桌子使用角度材料。在我的代码中，有时数据会超过监视器的大小，因此会出现一个水平滚动条。在这种情况下，我的分页器没有与表对齐，如下所示 ? 我想用相同的宽度对齐mat-table和mat-paginator。 下面是我的html <div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef=
浏览 10提问于2020-07-15得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
