Angular 4 - 如何为 ngFor 循环内的标签拥有唯一的 id 值?

2024-03-21

我遇到了一个问题,我需要为我的数据行中的每个数据行提供一个唯一的 id 值*ngFor角度 4 中的循环。

我的代码是这样的:

<div *ngFor="let row of myDataList">
  <div id="thisNeedsToBeUnique">{{ row.myValue }}</div>
</div>

假设你的对象中有一个唯一的 id 值,那么你可以这样做:

<div *ngFor="let row of myDataList">
  <div [attr.id]="row.myId">{{ row.myValue }}</div>
</div>

你也可以这样做:

<div *ngFor="let row of myDataList">
  <div attr.id="{{row.myId}}">{{ row.myValue }}</div>
</div>

您还可以将字符串和动态值连接在一起,如下所示:

<div *ngFor="let row of myDataList">
  <div [attr.id]="'myString' + row.myId">{{ row.myValue }}</div>
</div>
<!-- Or -->
<div *ngFor="let row of myDataList">
  <div attr.id="myString{{row.myId}}">{{ row.myValue }}</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 4 - 如何为 ngFor 循环内的标签拥有唯一的 id 值? 的相关文章

  • 如何在 Angular 4 中的 HTML 中包含或排除属性

    我正在使用 Angular 4 和 Angular 材料来构建一张桌子 我想要mat sort header有条件地添加到以下模板中
  • 没有 Props 的 TypeScript React State

    我想利用 TypeScript 中的静态和强类型 但仅限于状态 因为我不打算采用任何道具 当我尝试传递接口时 最终出现错误 import as React from react import Link from react router d
  • 是否有一种类型安全的方法可以将较大的对象减少()为打字稿中的新类型?

    我有一个表示数据库查询结果的数据结构 它是一个具有许多属性的对象 所有属性都是标量 在我的例子中 都是字符串或数字 我想提取这些属性的一部分并填充一个具有已定义形状的新对象 const input Record
  • 我可以用 HTML5/JS 编写文件吗?

    我想知道是否有什么方法可以从 HTML5 JS 写入文件 在浏览器中 假设您的最终目标是让用户将您的文件保存在他们能找到的地方 例如右键单击链接并选择 另存为 时 这些 API 的浏览器覆盖范围还不够广泛 这可能是由于出于安全考虑 然而 无
  • 如何让CSS选择以字符串开头的ID(不是Javascript)?

    如果 HTML 中有这样的元素 id product42 id product43 如何匹配所有以 product 开头的 id 我已经看到了完全使用 javascript 执行此操作的答案 但是如何仅使用 CSS 执行此操作 id pro
  • 电子邮件链接在 Android 上不起作用

    我有 HTML 格式的点击电子邮件链接的代码 它在我的电脑上运行良好 但在移动设备上不起作用 我只有 Android 所以我不知道问题是否仅在 Android 上或所有移动设备上 当我按下链接时 浏览器显示 网页无法显示 邮寄至 电子邮件受
  • 使用 Angular 2 的前端“微服务”

    我正在为一些奇怪的情况寻找解决方案 让我们快速浏览一下 angular2 seed 项目 以便我可以更好地解释 https github com mgechev angular2 seed tree master src client ap
  • 未捕获的 TypeMismatchError:无法在“CanvasRenderingContext2D”上执行“drawImage”

    我对以下代码片段有疑问 var o inserted motive find span contains document documentElement o 0 b fillText m i h b drawImage d i h e f
  • TDD/测试 CSS 和 HTML? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 有没有办法测试 CSS 和 HTML 例如 有时某些通知会受到某些 CSS 更改的影响 我不想每次进行更改时都手动测试所有通知 Tha
  • 如何将 div 与其父级的顶部对齐,但保持其内联块行为?

    See http jsfiddle net b2BpB 1 http jsfiddle net b2BpB 1 问 如何让box1和box3对齐到父div的顶部boxContainer boxContainerContainer backg
  • 如何去掉单词末尾多余的连字符

    我有句话我已经放了 shy 里面 它可以使用连字符 直到我达到足够小的屏幕尺寸 然后它在末尾添加一个额外的连字符 编辑 无法在 jsfiddle 中重现它 因为它似乎对 html 的解释不同 不过我可以展示问题的图片 h3 Flu shy
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • NestJS e2e 测试模拟会话装饰器

    我正在尝试使用 supertest 编写一个 e2e 测试 其中我的控制器实际上使用了 Session 装饰师 然而 我不想承担使用数据库连接等启动会话的全部负担 因此测试中的我的应用程序实际上并未初始化会话 相反 我想首先模拟掉装饰器提供
  • 无法读取未定义的“触及”属性

    为什么我会收到此错误无法读取未定义的属性 为什么无法读取formName controls email touched但它能够阅读formName get custDetails touched
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 用于渲染 html 子集的 Django templatetag

    我有一些 html 在本例中是通过 TinyMCE 创建的 我想将其添加到页面中 但是 出于安全原因 我不想只打印用户输入的所有内容 有谁知道模板标签 最好是过滤器 只允许呈现 html 的安全子集 我意识到 Markdown 和其他人就是
  • 避免在 ES6 的函数内定位 this 的对象作用域

    例如 我正在使用 D3 js 运行一个项目 导入特定模块并调用它们的函数 Setup TypeScript ES6 导入特定的 D3 组件 角6 我有一个对象 在本例中是一个角度指令 并在 SVG 画布上绘制一些圆圈 并希望它们在拖动事件上
  • 将输入中每个单词的第一个字符设为大写

    我想知道如何在输入区域自动生成单词的第一个字符 目前我的代码是 Name
  • 如何读取firebase推送通知内容并在ionic2中触发方法?

    是否可以访问push notificationionic 2 中的内容并在通知到达时执行一堆代码或event fire 我建议使用科尔多瓦插件 firebase https github com arnesson cordova plugi

随机推荐