同时使用ngFor和ngIf列出项目
ngFor和ngIf是Angular框架中常用的指令，用于在模板中动态渲染和控制元素的显示。
ngFor指令用于循环遍历一个集合，并为集合中的每个元素创建一个模板实例。它可以与*号结合使用，例如：
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>上述代码会根据items数组的长度，生成相应数量的li元素，并将数组中的每个元素显示在li元素中。
ngIf指令用于根据条件控制元素的显示与隐藏。它接受一个布尔表达式作为参数，当表达式为true时，元素会被渲染出来；当表达式为false时，元素会被从DOM中移除。例如：
<p *ngIf="showParagraph">这是一个段落。</p>上述代码中，如果showParagraph为true，则段落会被渲染出来；如果showParagraph为false，则段落会被隐藏。
同时使用ngFor和ngIf可以实现根据条件循环渲染元素。例如：
<ul>
<li *ngFor="let item of items" *ngIf="item.visible">{{ item.name }}</li>
</ul>上述代码会遍历items数组，并根据每个元素的visible属性决定是否渲染对应的li元素。
ngFor和ngIf的组合可以在Angular应用中灵活地控制元素的显示与隐藏，并根据数据动态生成模板内容。
关于腾讯云相关产品和产品介绍链接地址，可以参考腾讯云官方文档：
- 腾讯云产品文档：https://cloud.tencent.com/document/product
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动推送：https://cloud.tencent.com/product/tpns
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-realtime-rendering
相关·内容
4回答
怎么买云服务器？
云服务器、5折上云
请描述您的问题
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=cdb&utm_campaign=firstpurchase&utm_term=0110
浏览器信息
Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 482提问于2018-03-12
1回答
单击克隆项2上未触发的卡片上的事件
html、css、owl-carousel
我使用owl旋转木马来显示产品，因为我在卡片上列出了产品，其中有add to cart按钮，但是在克隆项上的add按钮不会触发单击事件。
--我知道这方面有很多问题，但在所有情况下，答案都是使循环选项为false，但在我的情况下，我想要循环选项。
loop: false
还有，旋转木马点击对我也不起作用，
$('.bstsrv-carousel').on('click', '.item', function () { alert("click"); });
这是我的旋转木马：
<div class=
浏览 1提问于2019-11-06得票数 0
2回答
使菜单在角度上活动
javascript、html、angular、angular2-routing
在我的应用程序中，我有一个带有菜单项的标题。我从服务中检索菜单列表，并在标题中显示相同的菜单列表。在主列表的悬停中，我将显示子菜单。单击其子项并导航到其子项页(子项可以处于多个级别)，我希望使父项处于活动状态。我希望用户被告知他们在哪个页面下。
<div class="collapse navbar-collapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown" *ngFor="let menu of
浏览 1提问于2021-06-17得票数 1
3回答
如何将ngIf与ngFor相结合
angular
我对角质很陌生。
我想打印与经销商有关的产品清单。为此，我考虑过打击*ngIf *ngIf，下面是一个代码：
<div class="distributors-here ui-g-12" *ngIf="distributors">
<h2 >Distributors <i class="fa icon fa-plus"(click)="showDialog()"></i></h2>
<p class="error-message" *ngI
浏览 0提问于2018-03-21得票数 5
回答已采纳
2回答
ngfor和ngif使用局部变量不工作。
javascript、angular
我正在尝试创建一个带有角2的应用程序，我有一个手风琴菜单，我想要模板菜单.这是我的密码：
<ul class="category_vl fold-menu" >
<li *ngFor="#wrapper_item_menu of arrayOfKeys">
<a (click)="menu($event)" title="" class="clearfix hv2-category-item">
浏览 4提问于2016-05-02得票数 2
回答已采纳
3回答
Angular2:呈现/重新加载组件的模板
angular、typescript、angular2-template
理想情况下，我需要重新加载/重新复制组件的模板，但是如果有更好的方法来实现它，我会很高兴地实现它。
期望行为：
所以，我有一个菜单元素的组件。当(在另一个组件中)单击IBO (按下说，单击某种类型的'client‘)时，我需要在菜单中添加一个新选项，即IBO和一个子列表。
IBOsNavigationElement 组件(菜单组件)：
@Component({
selector: '[ibos-navigation-element]',
template: `
<a href="#"><i class=&
浏览 1提问于2017-04-13得票数 5
回答已采纳
1回答
angular 6事件未在表单中触发
angular
我使用Angular 6。我有以下属性指令。我在这个指令中定义了一个事件单击。 @Directive({
selector: "[pa-attr]"
})
export class PaAttrDirective {
@Input("pa-attr")
@HostBinding("class")
bgClass: string;
@Input("pa-product")
product: Product;
@Output("pa-category")
浏览 33提问于2019-02-08得票数 0
2回答
函数内部的角度运行if-语句
angular
在角度上，对于对象我有以下html：
<li class="first_column">
<div class="my_item" *ngFor="let item of items ; let i = index">
<div *ngIf="i % 2 == 0"> //Odd number
<item-detail [item]="item"></item-detail>
</div>
浏览 0提问于2017-06-12得票数 0
3回答
在页面刷新时，保持导航栏状态
javascript、css、angular、typescript
我有一个侧栏菜单，其中包含一个多级菜单。如果我选择了一个子菜单，我希望在刷新页面后选择器导航栏在子菜单中保持激活状态。这有可能吗？ 下面是一些代码： <ng-template ngFor let-item [ngForOf]="navItems">
<ng-template [ngIf]="item.divider">
<li class="nav-divider"></li>
</ng-template>
<ng-template
浏览 36提问于2019-06-21得票数 1
2回答
Angular 9:使用组件作为指令
angular、angular9、angular10
最近我正在阅读一个angular ui框架的源代码，我对以下代码有疑问： @Component({
selector: '[nbMenuItem]',
templateUrl: './menu-item.component.html',
animations: [
...
],
})
export class NbMenuItemComponent implements DoCheck, AfterViewInit, OnDestroy {
@Input() menuItem = <NbMenuItem>null;
浏览 33提问于2020-07-09得票数 1
回答已采纳
1回答
错误标题:无法读取未定义的Angular Firebase的属性‘TypeError’
angular、typescript、firebase、firebase-realtime-database
我正在尝试从firebase DB上获取HTML角度组件的产品标题。日期和发货名称工作正常，但产品标题在控制台上生成错误。 <div class="row">
<div class="col-md-8 col-sm-12">
<ng-container *ngIf="orders$ | async as order">
<ng-container *ngIf="order.payload.val().items" ; else notFound
浏览 9提问于2020-06-28得票数 1
回答已采纳
1回答
如果这是可重复的，如何在角js中隐藏元素？
javascript、angularjs、angularjs-directive
我已经创建了一个代码，我是可重复的文字与图标。
你看到的img，但我想隐藏到这个，实际上，我显示这个图像，如果我有锚链接，而不是显示，如果我没有链接，而不是没有显示这个图像。这在角js中是可能的吗？
我的代码是：
角码是
var myAppMy = angular.module('myFapp', []);
myAppMy.controller('myControler', function($scope) {
$scope.items = [
{
"title":"Book" ,"
浏览 2提问于2014-09-12得票数 0
1回答
根据索引将元素添加到ngfor dom
javascript、angular、typescript
我想渲染基于索引的DIV元素，我不想让DIV渲染“项目”的所有ngfor。在基于索引的DIV中也可以有动态内容吗？感谢你的帮助。谢谢。 <ul>
<li *ngFor="let item of items; let i =index">
<i (click)="add(i)">
<div *ngIf="i">
</div>
</li>
</ul>
浏览 12提问于2020-05-01得票数 0
4回答
ngIf查找substr
angular
<ul class="list-group" *ngFor="let head of channelDisplayHeads">
<li class="list-group-item" *ngFor="let channel of channelList" ngIf="channel.channel.indexOf('head') === 1">
<strong>{{ head }}</strong>
浏览 3提问于2017-12-06得票数 0
回答已采纳
6回答
角ngIf使用父复选框复选框选中条件
html、angular、angular-ng-if
我有点被我的问题困住了。我正在进行这样的观察：
我从API中获取数据，因此我将有多个选项和子选项。但是，我希望只在选中父复选框时才出现子选项。我试着用*如果：
<ul *ngFor="let job of jobs; let i = index">
<input type="checkbox" id="{{i}}" value="{{job.name}}"><label
for="{{i}}">{{job.name}}</label>
<
浏览 11提问于2021-09-30得票数 1
回答已采纳
1回答
在我的HTML模板中我做错了什么？
javascript、html、angular、observable
说到可观察的角度，我还不舒服，所以我在训练自己。
我正在编写一个小应用程序来管理拳击俱乐部。
我想向大家展示最近三次选秀的拳击手。
所以我尝试了以下几种方法
<div class="col-6">
<div *ngIf="lessons">
<div *ngIf="(lessons|async).length > 0">
<h2>les 3 derniere lessons </h2>
浏览 6提问于2019-10-26得票数 0
回答已采纳
2回答
产生不必要的html标记-角
html、angular
NgIf和NgFor在同一个元素中以减少DOM中的元素
我的情况是：
<li *ngFor="let item of array; let i = index">
<content *ngIf="i < someVar"></content>
</li>
我想要的情况：
<li *ngFor="let item of array; let i = index" *ngIf="i < someVar">
<content></c
浏览 3提问于2019-11-27得票数 0
回答已采纳
1回答
如何通过动态制表符系统显示不同的列表？
html、list、listview、angular7
我有一个具有以下结构的对象数组：
[{
"name": "Equipment",
"functional_id": "furniture",
"products": [
{
"file": "data:image/;base64,",
"name": "White bags",
"description": "Reusable",
"id"
浏览 7提问于2020-05-20得票数 0
回答已采纳
1回答
当使用useState触发事件时，如何更改状态？
javascript、reactjs、react-hooks、use-state
为了学习react，我正在尝试实现一个基本的商店。 我的想法是有很多产品图片。如果用户点击产品图片，这个图片就会转过身来，显示产品的评论、评级等内容。 对于这个问题，我有3个js文件: Container.js (包含从产品-卡片到导航栏等的所有内容)，ProductList.js (返回包含所有不同产品的UL )和ItemCard.js (返回LI形式的实际产品)。 我的目标是反转backsideVisible的值。 为了更好地理解，我提供了一个最小的示例： Container.js： function Container() {
const [item, setItem] = u
浏览 26提问于2021-10-06得票数 1
回答已采纳
2回答
根据角色和权限隐藏/显示组件中的菜单和元素
javascript、html、jquery、angular
我也在使用一个angular应用程序实现登录。我维护了menu-items.ts，我可以从中获取我的所有菜单&遍历它们并显示它们。我在登录时收到菜单名称和权限“读/写”。现在我想隐藏/显示基于角色和权限的组件中的菜单和元素。怎样才能达到同样的效果呢？孩子气地引导我。 const MENUITEMS: IMenuItem[] = [
{
name: 'Admin',
type: 'main',
icon: 'apps',
isActive: true,
isMenuActive: false
浏览 31提问于2021-03-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
