如何循环访问Angular中具有未知属性的数组对象
在Angular中，如果要循环访问具有未知属性的数组对象，可以使用*ngFor指令和安全导航操作符（?）来处理。
首先，使用ngFor指令在模板中循环遍历数组对象。例如，假设我们有一个名为items的数组对象，可以这样使用ngFor指令：
<div *ngFor="let item of items">
{{ item.property }}
</div>在上面的代码中，我们使用*ngFor指令循环遍历items数组，并访问每个item对象的property属性。
然而，如果数组中的某些对象具有未知属性，而其他对象没有该属性，可以使用安全导航操作符（?）来避免出现错误。安全导航操作符会在属性不存在时返回null而不是抛出错误。
<div *ngFor="let item of items">
{{ item.unknownProperty?.nestedProperty }}
</div>在上面的代码中，我们使用安全导航操作符（?）来访问item对象的unknownProperty属性，如果该属性不存在，则不会抛出错误，并且不会访问nestedProperty属性。
对于循环访问具有未知属性的数组对象，可以使用上述方法来处理。请注意，这只是Angular中的一种处理方式，具体的实现可能会根据项目的需求和数据结构而有所不同。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动推送服务（TPNS）：https://cloud.tencent.com/product/tpns
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（TBC）：https://cloud.tencent.com/product/tbc
- 腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
4回答
利用腾讯云GPU构建深度学习网络？
对象存储、深度学习
如题，本人（学生）想用腾讯云构建一个实验性的深度学习网络，具体要用到腾讯云的哪些服务呢？（GPU，COS），另外还需考虑较低的成本。。。
浏览 1125提问于2017-12-13
4回答
数据比较多，有什么好点的存储方案吗？
对象存储、文件存储
贵州地区，给公司做类似企业网盘的东西，存储数据大概在6~7T左右，有没有好点的存储方案呢？我看腾讯云这边有COS、CFS等，我是从网站直接读取数据，推荐那个？有没有什么试用渠道呢？
浏览 964提问于2017-09-15
7回答
怎么导出腾讯云服务器镜像并下载到本地？
导出的镜像，我能在本地环境正常使用么，我想把这个镜像再安装到我本地的电脑上，请问这个操作是都能成功
浏览 14485提问于2020-08-03
请描述您的问题
标题：常见问题 - 文件存储 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/582/9551
浏览 3575提问于2018-02-12
2回答
使用静态对象数组迭代*ngFor，不断更新DOM
angular、typescript
我有一个简单的组件，它迭代对象的静态数组并显示内容。当将此组件添加到更大的应用程序中时，内容将正确显示，但我无法在其上注册任何单击事件。当我使用right click -> Inspect检查chrome中的元素时，就会看到body标记，它不会像预期的那样深入到单个元素。
通过手动导航，检查元素会显示组件不断地被DOM更新(div标记闪烁)。根据我的理解，不应该检测到任何更改，因为它是一个静态数组。
将对象数组更改为简单的字符串数组，['a', 'b', 'c']的行为与预期相同，并且DOM没有被更新。
添加额外的元素，ngFor之外的模板
浏览 4提问于2017-01-12得票数 5
回答已采纳
1回答
Angular Inside ngFor如何设置[disabled] not working with multiple conditions
angular、validation、reactive、disable
我有ngFor在里面，我正在尝试禁用基于多种条件的按钮，我能做什么，任何人建议我。我不知道如何在有多个条件的ngFor中禁用。I have way disabled="option.value.dynamicAttributeList.length === countForColor“second disabled="option.value.dynamicAttributeList.length === countForColor || option.value.dynamicAttributeList.length === countForColor”(我已经尝试了“se
浏览 16提问于2021-01-07得票数 0
2回答
为什么我不能使用键而不是索引角2来读取json数据？
json、angular、typescript
我目前在角2中工作，通过api接收我的json数据。我收到了以下格式的数据。
{
"totalItems": 2719,
"totalPages": 272,
"results": [
{
"SNR_Title": "Acer - 11 11.6\" Refurbished Chromebook - Intel Celeron - 4GB Memory - 16GB eMMC Flash Memory - Gray",
浏览 0提问于2017-06-10得票数 1
回答已采纳
1回答
我试图学习如何在角中创建动态表单字段，我无法理解ngFor循环中索引值的工作逻辑，以及这个索引值如何帮助创建动态表单字段。
product-form.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
@Component({
selector: 'app-product-form',
template
浏览 0提问于2019-07-24得票数 1
回答已采纳
4回答
腾讯云官方有能动态的将我的IP加入安全组的软件吗？
云服务器、网络安全、tcp/ip、安全
云服务器是私人用途的，不需要其他用户访问。
因为我的IP是动态的，所以我不能在安全组中设置一个固定的IP去成为白名单，但是我的服务器又总是遭受各种人的攻击，我想在安全组这屏蔽他们，但怎么放过我自己这个动态的IP呢？
腾讯有没有一款软件可以安装在本地，只要安装了这个软件就不会被拦截，然后拦截其他所有IP？
浏览 362提问于2021-09-09
回答已采纳
2回答
如何声明数组中的数组？
angular
我正在接收一个名为products的JSON数组。我正在使用ngFor循环它。
*ngFor="let product of products"
每个产品都有一个数组，我正在循环如下所示
*ngFor="let item of product.Items"
我需要在product.items中设置一个等于ngOnInit的变量。就像这样：
this.items = product.Items
但是，我不知道如何正确地访问父数组(products)的子数组，并将子数组分配给ngOnInit中的一个变量。
浏览 7提问于2017-04-06得票数 0
回答已采纳
3回答
在使用GET方法时，数据来自控制台，而不是HTML
html、angular、service
我已经在ngOnInIt()中编写了我的get方法。当我在控制台中打印数据时，它是可见的，但当使用插值在HTML语言中打印时，它返回[ object object]
{{filteredCourses}} ==>对象对象
当我在这里使用{{course.category|json}}时，我得到了数组"course“：”数据库“，”类别“：”数据库“，”长度“："2hr”的所有值。
html :-
<div class="courses" fxLayout="row wrap" fxLayoutAlign="center&#
浏览 46提问于2020-03-07得票数 0
3回答
在模板angular 5中显示嵌套json数组的项
json、angular、angular5
如何在模板中显示此json数据的“注释”？
(此json来自ngFor数据)
{
"product_id": 2,
"author": 1,
"category": 2,
"title": "python",
"description": "python desc",
"filepath": null,
"price": "50000",
"created_date": "2018
浏览 1提问于2018-02-06得票数 0
回答已采纳
1回答
当状态改变而不发生突变时，角重呈现组件列表
javascript、angular、angular-state-managmement
我来自反应，我已经和角质一起工作了几个月。当重新呈现时，React组件只更新必要的HTML，而当状态未发生变化时，角度组件似乎完全重新呈现。如果我直接变异这个州的话，效果会很好。
下面是我最基本的例子：
我有主组件，它保存状态：
items = [{ name: "John", age: 8 }, { name: "Jane", age: 20 }];
它认为，它提供了一个项目清单：
<item *ngFor="let item of items" [item]="item"></item>
item组件如
浏览 0提问于2019-05-26得票数 1
回答已采纳
3回答
签入模板，如果变量是数组、字符串、数字
javascript、angular、typescript、ecmascript-6、angular5
我有一个items数组，如下所示，在父component.ts文件中
items = [
{text: 'Length' , value: 10 },
{text : 'Degree' , value : "108"},
{text : 'Edges' , value : [10,20,30]}
]
然后，我在父组件中的*ngFor循环中放置了一个名为app-label-values的组件，如下所示
<div *ngFor ="let item of items">
<
浏览 0提问于2018-08-09得票数 3
回答已采纳
3回答
绑定属性值上的角分量选择器
angular、components、selector
我试图在属性值上编写一个组件选择器，如下所示：
selector: '[data-type=Type1]'
这在以下HTML中工作得很好：
<div *ngFor="let item of items">
<div data-type="Type1"></div>
</div>
但不是这样的(这当然是我想要的)：
<div *ngFor="let item of items">
<div [data-type]="item.type">
浏览 4提问于2021-07-21得票数 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回答
请描述您的问题
标题：年底大酬宾-腾讯云
地址：https://cloud.tencent.com/act/bargin?utm_source=portal?utm_medium=recommend&utm_campaign=sms&utm_term=1204#cdb_hot
浏览器信息
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
浏览 888提问于2017-12-18
1回答
显示集合中不存在于购物车Shopify中的商品
shopify、liquid
我正在尝试迭代购物车中的商品，并使用购物车中没有的产品生成一个追加销售div。下面是我到目前为止的代码，但我在向购物车添加两个项目时遇到了问题，运行两次循环生成两次html。有什么办法解决这个问题吗？我被难住了。 {% for item in cart.items %} // iterates over items in cart
{% if item.product.id == 4456879040188 %} // checks if product id matches in item in cart
<div class="upsell-pop"
浏览 23提问于2020-01-29得票数 0
回答已采纳
2回答
无法将HTTP响应映射到角5中的接口类型
angular、angular-httpclient
我正在调用一个HTTP请求，并在服务中使用接口将接收到的响应转换为所需的类型。HTTP响应是一个带有一些键值对项的JSON对象。我已在组件中订阅了该服务。当我控制台记录订阅函数中接收到的响应时，它用键值对象进行完美的记录。但是，当我将该对象分配给组件类成员时，它似乎没有被输入到所需的接口类型。因为当我在组件html中使用类成员变量键时，我会得到错误-“无法读取未定义的属性'X‘”。
这是代码片段-
接口
export interface NewsItem {
status: string;
totalResults: number;
articles: any[
浏览 0提问于2018-05-22得票数 0
回答已采纳
3回答
如何在复杂对象的角*ngFor循环中获得异步条件属性
angular、loops、asynchronous、observable
让我们假设我有一个空的可观测对象，它在某个时候被填充，其中包含这样的数据：
const props$ =
{
prop1: 1,
prop2: 2,
prop3: 3,
}
我有一个循环，有这样的数据：
const loopData =
[
{ property: "prop1", label: "First" },
{ property: "prop2", label: "Second" },
{ property: "prop3", label: "Third" },
]
在这
浏览 0提问于2019-04-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
