Angular *ngIf 和 *ngFor 在 元素上使用
在同一个元素上，我需要*ngIf和*ngFor指令.我在下面的列表中找到了很多答案，但对于这种情况，没有一个答案.
我有一个表格，我在其中循环遍历对象数组，并在标题中动态写入单元格:
<table border="1" width="100%">
<thead>
<tr>
<td *ngFor="let item of headerItems" *ngIf="item.visible">{{ item?.name }}</td>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
我想显示/隐藏对象是否包含设置为true的visible.我怎样才能做到这一点？
推荐答案
您可以使用<ng-container> helper元素来实现这一点.
<ng-container *ngFor="let item of headerItems" >
<td *ngIf="item.visible">{{ item?.name }}</td>
</ng-container>
它不会添加到DOM中.
Angular相关问答推荐
如何取消针叶林输入的自动填充？
Angular v12：Uncatch(in promise)：ReferenceError：d3 is not defined ReferenceError：d3 is not defined
Angular 动画—淡出适用于DIV，不完全适用于子组件
如何在HTMLTITLE属性中使用Angular 显示特殊字符？
身份验证卫士给了我17个Angular 的任何类型
第15角Cookie的单元测试用例
存储服务存储在本地存储中，但无法检索到它
当项目具有BrowserAnimationsModule时，Angular UI未拾取数据模型更改
截获火灾前调用公共接口
Ng serve不工作，没有错误或消息来显示问题所在
是否可以在Angular(12+)中迭代指定的范围而不是整个数组
Angular 13 Sass 模块无法在编译中正确导入文件
如何在 form.value 中禁用复选框
react表单上的自定义验证器用于密码并确认密码匹配将未定义的参数导入 Angular 4
Angular2 Material Dialog css，对话框大小
Angular2 SVG xlink：href
错误 TS1086：无法在 Angular 9 的环境上下文中声明访问器
无法绑定到matMenuTriggerFor，因为它不是 button的已知属性
Angular2 中的providers提供者是什么意思？
Angular 2 Material 2 日期 Select 器日期格式
实用课程推荐
在同一个元素上，我需要*ngIf和*ngFor指令.我在下面的列表中找到了很多答案，但对于这种情况，没有一个答案.
我有一个表格，我在其中循环遍历对象数组，并在标题中动态写入单元格:
<table border="1" width="100%">
<thead>
<tr>
<td *ngFor="let item of headerItems" *ngIf="item.visible">{{ item?.name }}</td>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
我想显示/隐藏对象是否包含设置为true的visible.我怎样才能做到这一点？
推荐答案
您可以使用<ng-container> helper元素来实现这一点.
<ng-container *ngFor="let item of headerItems" >
<td *ngIf="item.visible">{{ item?.name }}</td>
</ng-container>
它不会添加到DOM中.
Angular相关问答推荐
如何取消针叶林输入的自动填充？
Angular v12：Uncatch(in promise)：ReferenceError：d3 is not defined ReferenceError：d3 is not defined
Angular 动画—淡出适用于DIV，不完全适用于子组件
如何在HTMLTITLE属性中使用Angular 显示特殊字符？
身份验证卫士给了我17个Angular 的任何类型
第15角Cookie的单元测试用例
存储服务存储在本地存储中，但无法检索到它
当项目具有BrowserAnimationsModule时，Angular UI未拾取数据模型更改
截获火灾前调用公共接口
Ng serve不工作，没有错误或消息来显示问题所在
是否可以在Angular(12+)中迭代指定的范围而不是整个数组
Angular 13 Sass 模块无法在编译中正确导入文件
如何在 form.value 中禁用复选框
react表单上的自定义验证器用于密码并确认密码匹配将未定义的参数导入 Angular 4
Angular2 Material Dialog css，对话框大小
Angular2 SVG xlink：href
错误 TS1086：无法在 Angular 9 的环境上下文中声明访问器
无法绑定到matMenuTriggerFor，因为它不是 button的已知属性
Angular2 中的providers提供者是什么意思？
Angular 2 Material 2 日期 Select 器日期格式
实用课程推荐