ngFor不显示数组数据
ngFor是Angular框架中的一个指令，用于在模板中循环渲染数组数据。当ngFor不显示数组数据时，可能有以下几个原因：
- 数组数据为空：首先需要确保要循环渲染的数组数据不为空。可以通过在组件中初始化数组数据或者从后端获取数据来确保数组不为空。
- 错误的数据绑定：确保在模板中正确地绑定了要循环渲染的数组数据。通常，ngFor指令需要在一个HTML元素上使用，并使用*ngFor指令来指定要循环渲染的数组和当前循环的元素。
- 例如，如果要循环渲染一个名为"items"的数组，可以这样使用ngFor指令：
- 例如，如果要循环渲染一个名为"items"的数组，可以这样使用ngFor指令：
- 上述代码将会在一个无序列表中循环渲染数组中的每个元素。
- 错误的数据访问：确保在模板中正确地访问了要循环渲染的数组数据。通常，可以使用点语法来访问数组中的属性或者直接访问数组元素。
- 例如，如果要循环渲染一个名为"items"的数组，而数组中的每个元素都有一个名为"name"的属性，可以这样访问属性：
- 例如，如果要循环渲染一个名为"items"的数组，而数组中的每个元素都有一个名为"name"的属性，可以这样访问属性：
- 上述代码将会在一个无序列表中循环渲染数组中每个元素的"name"属性。
如果以上步骤都正确，但ngFor仍然不显示数组数据，可能是由于其他代码逻辑或者样式问题导致。可以通过调试工具查看元素是否正确渲染，并检查相关的CSS样式是否影响了元素的显示。
腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
角4 in *ngFor，用于计算总值之和
angular
我在角4中做了一个小应用，我想在迭代*ngfor时显示总价值的总和。
HTML代码
<ul *ngFor="let hero of heroes;">
<li>{{hero.name}} <span>{{hero.price*hero.qty}}</span></li>
</ul>
<ul>
<li>Total <span>{{total}}</span></li>
</ul>
组件
total:number;
浏览 1提问于2017-11-14得票数 2
回答已采纳
2回答
Reactjs:无法读取null的URL属性，正在从API获取
javascript、reactjs、api、fetch
我有json格式的产品，是获取并显示在前端。在我的products.json中，每个产品都有一个图像url，但只有一些产品有图像url，其他的都是空的。当我在react中循环数据时，我总是在react应用程序中得到错误，说无法读取标签中null的属性，我如何编写一个逻辑，只在有图像源时才渲染图像，否则只返回一个空div？ <ul>
{this.state.items.map((items, index) => {
return (
<li className="ProductList-pr
浏览 29提问于2021-01-09得票数 0
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
1回答
多模型产品搜索查询
sql、ajax、laravel
我有两个数据库表，一个是产品，另一个是产品库存。我需要搜索产品名称，条形码和SKU。问题是产品库存表中的产品SKU。我怎么能处理好这些事情。
// $productSku = ProductStock::where('product_id',$product->id)->first();
$product = Product::where('name', 'LIKE', $request->keyword.'%')
/* ->orWhere($productSku, 'LIKE',
浏览 6提问于2021-12-13得票数 0
4回答
利用腾讯云GPU构建深度学习网络？
对象存储、深度学习
如题，本人（学生）想用腾讯云构建一个实验性的深度学习网络，具体要用到腾讯云的哪些服务呢？（GPU，COS），另外还需考虑较低的成本。。。
浏览 1132提问于2017-12-13
2回答
为什么角Flex布局默认为小窗口视图？
angular
我已经创建了一个产品提要，我想使用Flex布局，但是，由于某些原因，它似乎默认在视图上，就好像它在一个小型设备上一样，尽管目前它位于一个标准的膝上型计算机窗口上。我的布局的HTML是：
<div class="content" fxLayout="row wrap" fxLayout.xs="column wrap" fxFlexFill>
<ng-container *ngFor="let product of filteredProducts | async">
浏览 5提问于2020-01-20得票数 0
回答已采纳
1回答
使用部分MustacheJS呈现嵌套JSON
javascript、html、json、mustache、partials
我正在尝试使用胡子部分来呈现我的嵌套JSON (可以是多个级别)。它只呈现到第二层，而不是第三层&更大。根据定义，可以使用部分来递归地呈现。我做错了吗？还是有其他方法可以用胡子来达到同样的效果呢？
模板：
<script id="product-list" type="x-tmpl-mustache">
<ul class='products'>
{{#product}}
<li class='product'> {{ productName }} &l
浏览 1提问于2015-07-09得票数 6
回答已采纳
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
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
回答已采纳
2回答
将接受任何数据源的角视图组件列表
angular、typescript、angular6
我想创建公共列表组件，如下所示
<ul>
<li *ngFor="let item of items">{{item.text}}</li>
</ul>
带接口
export interface Items{
id:string
text:string
}
在component.ts中
@input items:any
现在，我想在任何数据源中重用上面的组件。
例如,
<app-list-view [items]="ProductList"></app-list-view>
&产
浏览 1提问于2018-09-23得票数 6
回答已采纳
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
回答已采纳
2回答
指令之间的交互作用
javascript、jquery、angularjs
我有两个指令，一个显示对象列表，另一个将对象添加到该列表中。我遇到的问题是，该列表以这种方式与另一个元素列表联系在一起：
主要代码：
<!--main code -->
<div>
<ul>
<li>
<element-a></element-a>
</li>
<li>
<element-a></element-a>
</li>
浏览 6提问于2014-02-10得票数 0
回答已采纳
2回答
为什么不能用var代替让它进入ngFor
javascript、angular、var、let
据我所知，javascript中的变量声明使用var和let，唯一的区别是var的作用域为当前函数，而let的作用域为当前块。所以，如果我在任何地方都使用var而不是let，它应该能工作。但在下面的代码中..。
<li *ngFor="let fruit of fruits">
{{ fruit}}
</li>
...if，我使用var，它给出了一个错误。
<li *ngFor="var fruit of fruits">
{{ fruit}}
</li>
错误: Uncaught (承诺)：错误:模
浏览 7提问于2017-07-31得票数 10
1回答
使用PHP将多个嵌套元素作为无序列表使用SimpleXML解析
php、xml、parsing、simplexml
我正在处理一个XML，它显示了大约20个产品的列表，每个<item>中都有一个<description>，然后每个<bullet>都有一个<bullet>。下面是一个例子：
我使用foreach循环和SimpleXML来提取产品数据，所有单个标记(如<image>和<title> )都正常工作。
我的问题是，它只是解析每个产品的第一个<bullet>，而不是所有这些产品。为了解决这个问题，我尝试添加一个for循环，它针对<description>标记中的所有嵌套项和输出，不管有多少项。但现在它给我
浏览 4提问于2016-11-03得票数 0
17回答
*ngIf和*ngIf在同一元素上造成错误
angular、ngfor、angular-ng-if
我在尝试在同一个元素上使用*ngFor和*ngIf时遇到了问题。
当试图循环遍历*ngFor中的集合时，集合被视为null，因此当试图在模板中访问其属性时失败。
@Component({
selector: 'shell',
template: `
<h3>Shell</h3><button (click)="toggle()">Toggle!</button>
<div *ngIf="show" *ngFor="let thing of stuff"
浏览 8提问于2016-01-07得票数 612
回答已采纳
1回答
如何将相等的数据分组并在模板中显示
python-3.x、django、django-templates
我有一个应用程序来显示在一家餐馆订购的产品的历史，为了获取餐馆的数据，我有以下观点：
def restaurant_orders(request):
restaurant = get_restaurant(request.user.restaurant.user_id)
products = list(restaurant.restaurante.values_list("id"))
items = Item.objects.filter(product_id__in=products).order_by('order_id'
浏览 3提问于2021-11-19得票数 0
回答已采纳
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
回答已采纳
2回答
Angular js中的Bootstrap崩溃
angular、twitter-bootstrap、angular-ui-bootstrap
我在使用带有angularJs的引导折叠ui时遇到了一个问题。当我单击箭头按钮时，它正在折叠所有项目(Div)，而不是一个项目。有谁可以帮我吗?我该如何定义要折叠的选定项(Div)，而不是全部？这是我的code.Thanks。
<div class="panel">
<div class="panel-header">
<div class="panel-header-info">
<div class="items_list" *ngF
浏览 0提问于2018-02-28得票数 0
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
回答已采纳
1回答
嵌套猫头鹰旋转木马2不能工作
jquery、owl-carousel、owl-carousel-2
我有两个owl旋转木马嵌套
这是html结构。
<li class="product">
<ul class="product-image-slider owl-carousel">
<li>image 1</li>
<li>image 1</li>
</ul>
content here..
</li>
<li class="produ
浏览 1提问于2018-08-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
