开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在我的angular项目中，为什么迭代(NgFor)组件的索引变量变成了字符串而不是数字

在Angular项目中，当使用NgFor指令进行迭代时，组件的索引变量默认是数字类型的。然而，如果索引变量变成了字符串而不是数字，可能是由于以下原因之一：

数据类型错误：首先，检查迭代的数据源是否包含了字符串类型的索引值。如果数据源中的索引值是字符串类型，NgFor指令会将索引变量自动转换为字符串类型。
错误的数据绑定：检查模板中的数据绑定是否正确。确保在NgFor指令中使用的索引变量没有被错误地绑定到了一个字符串类型的属性或变量上。
强制类型转换：如果确实需要将索引变量保持为数字类型，可以使用JavaScript的parseInt()或parseFloat()函数将字符串类型的索引值转换为数字类型。例如，可以在模板中使用parseInt(index)来将索引变量转换为数字类型。

总结起来，当在Angular项目中使用NgFor指令进行迭代时，组件的索引变量默认是数字类型的。如果索引变量变成了字符串而不是数字，需要检查数据源的类型、数据绑定的正确性，并可以使用强制类型转换函数来将字符串类型的索引值转换为数字类型。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：提供可扩展的计算容量，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：高性能、可扩展的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb
云原生容器服务（TKE）：基于Kubernetes的高度可扩展的容器管理服务。详情请参考：https://cloud.tencent.com/product/tke

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

AngularDart4.0 指南- 模板语法二顶

分配给* ngFor的文本是指导迭代器进程的指令。 *ngFor微语法分配给* ngFor的字符串不是模板表达式。这是一种微语法 - Angular解释的一种小语言。...字符串“let hero of heroes”是指：取英雄列表中的每个英雄，将其存储在本地英雄循环变量中，并使其可用于每次迭代的模板HTML。...模板输入变量 hero之前的let关键字创建一个名为hero的模板输入变量。 ngFor指令迭代由父组件的heroes属性返回的heroes，并在每次迭代期间将hero设置为列表中的当前项目。...* ngFor与index(索引) NgFor指令上下文的index属性返回每个迭代中项目的从零开始的索引。您可以捕获模板输入变量中的index，并在模板中使用它。...不要在同一模板中多次定义相同的变量名称。运行时值将是不可预知的。你可以使用ref-前缀替代＃。本示例将fax变量声明为ref-fax，而不是#fax。

30K2 0

Angular 6.x 基础教程

指令在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。...; 语法迭代数组中的每一项，另外我们使用 index as i 用来访问数组中每一项的索引值。...除了 index 外，我们还可以获取以下的值： first: boolean —— 若当前项是可迭代对象的第一项，则返回 true last: boolean —— 若当前项是可迭代对象的最后一项，则返回...true even: boolean —— 若当前项的索引值是偶数，则返回 true odd: boolean —— 若当前项的索引值是奇数，则返回 true 需要注意的是，*ngFor 中的 * 号是语法糖...这其中的原因是，ng-style 要求的参数是一个 Javascript 对象，color 是一个有效的 key，而 background-color 不是一个有效的 key ，所以需要添加 ''。

15.6K2 0

Angular核心概念：数据绑定

）]---重点（1）HTML绑定：{{NG表达式}} 效果图：在该组件的ts文件添加 export class MyC02Component{ uname = '叮当' age...= 20 } 在该组件.html文件添加用户名：{{uname}} 年龄：{{age}} 测试：在NG表达式可以执行哪些代码？...循环绑定：ngFor ngFor=“let 临时变量 of 数据”> ngFor=“let 临时变量 of 数据;let i= index”> ngFor=“let...临时变量 of 数据;index as i”> let i= index和index as i是遍历索引 *2....Angular中的指令分三类： 1.组件指令：NG中Component继承自Directive 2.结构型指令：会影响DOM树结构，必须使用开头，如ngFor，*ngIf 3.属性型指令：不会影响DOM

3.6K1 0

AngularDart 4.0 高级-结构指令顶

您将在本指南中学习到星号（*）是一种便利的符号，字符串是一种微型语法，而不是通常的模板表达式。 Angular将这个符号解析成一个围绕宿主元素及其后代的标记。...为什么要移除而不是隐藏？指令可以通过将其显示样式设置为无隐藏不需要的段落。...在应用结构指令之前，您可能想暂停一下，以考虑添加和删除元素以及创建和销毁组件的后果。星号（*）前缀当然，你注意到了指令名称的星号（*）前缀，并想知道为什么它是必要的以及它做了什么。...您可以在分配给ngFor的字符串中启用这些功能，这是您在Angular的microsyntax中编写的。...变量的作用域限于重复模板的单个实例。您可以在其他结构指令的定义中再次使用相同的变量名称。您通过在＃(#var)前缀加上变量名称来声明一个模板引用变量。引用变量是指其附加的元素，组件或指令。

16.1K2 0

AngularDart4.0 指南- 显示数据顶

这是语法的重要组成部分。有关更多信息，请参阅模板语法页面。注意ngFor指令中的hero变量; 它是模板输入变量的一个例子。...在“模板语法”页面的microsyntax部分阅读有关模板输入变量的更多信息。 Angular为列表中的每个项目复制，将hero变量设置为当前迭代中的项目（英雄）。...Angular使用该变量作为双曲花括号内插的上下文。在这种情况下，ngFor正在显示一个列表，但ngFor可以为任何Iterable对象重复项目。...在模板中使用任何Angular指令之前，您需要将它们列在组件的@Component注解的指令参数中。...现在英雄出现在一个无序的列表中。 ? 为数据创建一个类应用程序的代码直接在组件内定义数据，这不是最佳实践。但是，在一个简单的演示中，没关系。目前，绑定是一个字符串列表。

5.3K1 0

angular知识点梳理第二篇-基本语法

，但是在angular中我们引入框架的一个核心模块FormsModule才可以,该指令就是将数据驱动视图的改变！...在需要使用数据绑定的组件进行数据的处理 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home...-- 将list的索引值获取到赋值给i --> ngFor="let item of list,let i = index">{{item.title}} - {{i}} -...:hidden是要区别开的，当if判断为false的时候，页面上是整个元素都消失了，而不是仅仅隐藏了css样式在需要使用数据绑定的组件进行数据的处理 import { Component, OnInit...官方的话：为没有 DOM 元素的指令安排宿主管道管道其实就是具有一定功能的函数，主要是一些场景是对字符串什么的进行简单的转化，当然我们也可以自己使用自定义的函数进行数据的转换，只是angular给我们提供了一些初始化的功能函数管道详细列表

2.6K3 0

Angular 6.x 快速入门

在 Angular 中，我们可以通过 Component 装饰器和组件类来创建自定义组件。...基础知识定义组件的元信息在 Angular 中，我们可以使用 Component 装饰器来定义组件的元信息： @Component({ selector: 'my-app', // 用于定义组件在...Angular 实际项目中，最常用的指令是 ngIf 和 ngFor 指令。... ngFor 指令简介该指令用于基于可迭代对象中的每一项创建相应的模板。它与 AngularJS 1.x 中的 ng-repeat 指令的功能是等价的。...router-outlet 指令该指令用于告诉 Angular 在哪里加载组件，当 Angular 路由匹配到响应路径，并成功找到需要加载的组件时，它将动态创建对应的组件，并将其作为兄弟元素，插入到

14.1K2 0

Angular快速学习笔记（3） -- 组件与模板

显示数据在 Angular 中最典型的数据显示方式，就是把 HTML 模板中的控件绑定到 Angular 组件的属性。...template，而不是templateUrl，template可以直接书写html代码，简单的html推荐这种方式 @Component 装饰器中指定的 CSS 选择器 selector，它指定了一个叫...*ngFor 是 Angular 的“迭代”指令。...模板绑定是通过 property 和事件来工作的，而不是 attribute. 数据绑定的目标是 DOM 中的某些东西。...在 Angular 销毁指令/组件之前调用 OnInit钩子使用 ngOnInit() 有两个原因：在构造函数之后马上执行复杂的初始化逻辑在 Angular 设置完输入属性之后，对该组件进行准备

15.3K3 0

Angular: 最佳实践

Note: 本文中，我将尽量避免官方在 Angular Style Guide 提及的模式和有用的实践，而是专注我自己的经验得出的东西，我将用例子来说明。...在应用程序的 tsconfig.json 文件中，我们可以设置这个标志，告诉编辑器在未明确类型时候抛出错误。否则，编辑器坚定它无法推断变量的类型，而认为是 any 类型。...组件 Component 组件是 Angular 的核心特性，如果你设法让它们被组织得井井有条，你可以认为你工作已经完成了一半。考虑拥有一个或者几个基本组件类。...你的应用程序可以和不同的 API 端进行交互，因此我们希望将他们移动到字符串枚举中，而不是在硬编码中体现，如下： enum UserApiUrls { getAllUsers = 'users/getAll...从模版到组件方法的委托比原始的逻辑更难。请注意，这里我用了比原始更难的词语，而不是复杂这个词。这是因为除了检查直接的条件语句之外，任何逻辑都应该写在组件的类方法中，而不是写在模版中。

2.9K4 0

AngularDart4.0 指南- 模板语法一顶

更多的，大括号之间的文本是一个模板表达式，Angular首先评估并转换为一个字符串, 通过添加这两个数字来进行以下内插：的名称，则模板变量名称优先，后面是指令的上下文，最后是组件的成员名称。前面的例子显示了这样一个名字冲突。该组件具有hero属性，而* ngFor定义了英雄模板变量。...{{hero.name}}中的英雄是指变量输入变量，而不是组件的属性。模板表达式不能引用静态属性，也不能引用顶层变量或函数，如来自dart：html的window 或document 。... 模板上下文字段优先于组件上下文字段。在上面的deleteHero(hero)中，hero是模板输入变量，而不是组件的hero属性。...一次性字符串初始化在标准HTML中是常规的，并且它对于指令和组件属性也同样适用。以下示例将HeroDetailComponent的prefix属性初始化为固定字符串，而不是模板表达式。

5.2K1 0

最受欢迎的10大Angular技巧

今年 6 月，我和 Waterplea 接受了一个有趣的挑战：每天在 Twitter 上写一个 Angular 技巧。Angular 社区对此表示热烈欢迎。...管道 Angular 是非常强大的选项。它使我们能够遵循组件模板内部的声明性方法。...还有许多运算符不是很流行，但是可以用一行代码来解决你的特定问题。我就发现了一个例子： ?...s=20 你甚至可以制作自己的 ngFor 替代品最后一个：Angular 对于 for...of... 之类的指令有特殊的语法。这样，你可以创建自己的 ngFor。...例如，它可以是用于迭代映射的 ngFor。或一个简单的从一个数字迭代到另一个数字的 for： ? ?

2.1K4 0

angular入门教程_初学者织围巾简单教程慢动作

默认情况下，ng 命令生成出来的组件都会带上一个 app 前缀，如果你不喜欢，可以在 angular-cli.json 里面修改 prefix 配置项，设置为空字符串将会不带任何前缀。...模板内的局部变量属性绑定、事件绑定、双向绑定在模板里面使用结构型指令 *ngIf、*ngFor、ngSwitch 在模板里面使用属性型指令 NgClass、NgStyle、NgModel 在模板里面使用管道格式化数据...以上就是为什么大多数模板引擎都要强调“轻逻辑”的最根本原因。对于 Angular 来说，强调“轻逻辑”还有另一个原因：在组件的整个生命周期里面，模板函数会被执行很多次。...} 有一些朋友会追问，如果我在模板里面定义的局部变量和组件内部的属性重名会怎么样呢？...如果真的出现了重名，Angular 会按照以下优先级来进行处理：模板局部变量 > 指令中的同名变量 > 组件中的同名属性。

3.3K2 0

Angular 显示英雄列表

当依次遍历这个列表时，hero 会为每个迭代保存当前的英雄对象。不要忘了 ngFor 前面的星号（*），它是该语法中的关键部分。浏览器刷新之后，英雄列表出现了。...固然，你可以把更多样式加入到 styles.css，并且放任它随着你添加更多组件而不断膨胀。但还有更好的方式。...你可以在本指南底部的查看最终代码中找到它们。 @Component 元数据中指定的样式和样式表都是局限于该组件的。 ...主从结构当用户在主列表中点击一个英雄时，该组件应该在页面底部显示所选英雄的详情。在本节，你将监听英雄条目的点击事件，并更新英雄的详情。...Angular 会把所点击的上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个。

4.4K7 0

Angular2 之结构型指令几个概念

Angular 有一个强力的模板引擎，它能让你轻松维护元素的DOM树结构。 Angular指令可分为三种组件属性型指令结构型指令组件组件其实就是一个带模板的指令。... 注意：这里是出现或者消失，并不是隐藏。隐藏元素的利弊当我们隐藏元素时，组件的行为还在继续。它仍然附加子啊它所属于的DOM元素上，它仍然在监听事件。...angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然在进行！它还是占用着那么多的资源。另外一方面，重新显示这个组件会很快。... 这时候显示的内容是'Hip! Hooray!'，在Angular的控制下，DOM的效果是不同的。 ?...template-in-out-of-a2.png 显然，Angular把标签及其内容替换成了一个空白标签。这只是它的默认行为。

3K2 0

Angular 从入坑到挖坑 - 组件食用指南

4.1.2、模板绑定语法在 angular 应用中，组件扮演着控制器或是视图模型的作用，在创建组件时会关联一个 html 文件，这个 html 文件则是一个基础的 angular 模板文件在这个模板文件中...模板表达式的变量来源模板本身的变量指令的上下文变量组件的成员信息（属性 or 方法）在使用模板表达式时，如果变量名在多个来源中都存在的话，则模板变量是最优先的，其次是指令的上下文变量，最后是组件的成员...，再次显示时不用重新进行初始化过程 NgFor：通过定义单条数据的显示格式，angular 以此为模板，循环渲染出所有的数据 ngFor="let item of products; let...指令上下文中的 index 属性在每次迭代中，会获取到条数据的索引值当渲染的数据发生改变时 4，会导致 dom 元素的重新渲染，此时可以采用 trackBy 的方式，通过在组件中添加一个方法，指定循环需要跟踪的属性值... 别看了，我不是开封菜。。。

15.8K3 0

Angular 显示英雄列表

当依次遍历这个列表时，hero 会为每个迭代保存当前的英雄对象。不要忘了 ngFor 前面的星号（*），它是该语法中的关键部分。浏览器刷新之后，英雄列表出现了。...固然，你可以把更多样式加入到 styles.css，并且放任它随着你添加更多组件而不断膨胀。但还有更好的方式。...你可以在本指南底部的查看最终代码中找到它们。 @Component 元数据中指定的样式和样式表都是局限于该组件的。 ...主从结构当用户在主列表中点击一个英雄时，该组件应该在页面底部显示所选英雄的详情。在本节，你将监听英雄条目的点击事件，并更新英雄的详情。...Angular 会把所点击的上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个。

4K3 0

AngularDart 4.0 高级-管道顶

例如，在大多数使用情况下，用户更喜欢以1988年4月15日这样的简单格式查看日期，而不是原始字符串格式Fri Apr 15 1988 00:00:00 GMT-0700（太平洋夏令时）。...（请参阅模板语法页面的模板表达式部分），例如字符串文字或组件属性。...飞行英雄管道将一个FlyingHeroesPipe添加到*ngFor迭代器，该迭代器将英雄列表过滤到只能飞行的英雄。...当你不能时，你可以使用不纯的管道。或者你可能根本不使用管道。用组件的属性来追求管道的目的可能会更好，这点在本页稍后会讨论。不纯的管道 Angular在每个组件更改检测周期执行不纯管道。...--> ngFor="let hero of heroes | orderBy:'name,planet'"> 您通过文本字符串来识别排序字段，期望管道通过索引引用属性值（如hero

6.4K2 0

Angular学习（03）--lint检查规范和WebStorm小技巧

但对于默认的一些风格规范，我不是很赞同，比如说： name: string = 'dasu' 简单的在某个类中声明这么一个 name 变量，类型是 string，初始值为 dasu，但默认的 tslint.json...配置的代码风格会报错，因为它建议我们，既然已经初始化为字符串类型了，就没有必要再去声明变量的类型了。...所以，我个人还是比较习惯声明变量的类型，不管有没有对其进行初始化。以上只是个简单的例子，默认的一些代码风格，我个人都不是很习惯，所以，下面列举我的个人代码风格，供大伙借鉴、参考。...) 不以 on 为前缀表格数据的 *ngFor 指令时，建议以 item 命名每一项，如 *ngFor="let item of page?....我修改了部分默认的配置，下面给出的是所有项的配置，其中带有注释的配置项，就是我增加或修改原本默认的配置项，是基于我上面说的个人的一些习惯风格而进行的修改： "rules": { "arrow-return-shorthand

2.1K7 0

AngularDart4.0 指南- 表单顶

顺便说一句，您可以注入数据服务来获取和保存真实数据，或者将这些属性作为输入和输出（请参阅“模板语法”页面中的输入和输出属性）来绑定到父组件。这不是现在的问题，这些未来的变化不会影响表单。...p模板输入变量在每次迭代中是不同的power; 您使用插值语法显示其名称。与ngModel的双向数据绑定现在运行应用程序有点令人失望。 ? 你没有看到英雄数据，因为你还没有绑定到英雄。...-- TODO: remove the next diagnostic line --> {{spy.className}} 模板引用变量 spy模板引用变量绑定到 DOM元素，而name...为什么“ngForm”？指令的exportAs属性告诉Angular如何将引用变量链接到指令。...如果没有Angular的帮助，你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性？对你来说，这很简单：在（增强的）表单元素上定义一个模板引用变量。在多处的按钮中引用该变量。

17.5K3 0

ng-content 中隐藏的内容

如果你尝试在 Angular 中编写可重复使用的组件，则可能会接触到内容投射的概念。然后你发现了，并找到了一些关于它的文章，进而实现了所需的功能。...在我们尝试解释为什么之前，让我们再来验证一个问题，即在 ng-content 指令的外层容器中添加 ngIf 指令： import { Component } from '@angular/core';...因此，投影内容的生命周期将被绑定到它被声明的地方，而不是显示在地方。这种行为有两个原因：期望一致性和性能。什么 “期望的一致性” 意味着作为开发人员，可以基于应用程序的代码，猜测其行为。...其中唯一方法就是查看第三方库的代码，了解它们的内部处理逻辑。将组件的生命周期被绑定到我们的应用程序组件而不是包装器的意义是，开发者可以掌控计数器只被实例化一次，而不用了解第三方库的内部代码。...性能的原因更为重要。因为 ng-content 只是移动元素，所以可以在编译时完成，而不是在运行时，这大大减少了实际应用程序的工作量。

2.7K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭