如何将*ngFor (角度)的值传递给data-target属性？

在Angular中，ngFor是一个结构指令，用于循环渲染元素列表。要将ngFor的值传递给data-target属性，可以使用属性绑定。

首先，确保你已经在组件中定义了一个属性来存储*ngFor的值。例如，假设你有一个名为items的数组，你可以在组件中声明它：

items: any[] = ['item1', 'item2', 'item3'];

接下来，在HTML模板中使用ngFor循环渲染元素，并使用属性绑定将ngFor的值传递给data-target属性。例如：

<div *ngFor="let item of items" [attr.data-target]="item">
  {{ item }}
</div>

在上面的代码中，我们使用[attr.data-target]来绑定data-target属性，并将item作为它的值。这样，每个循环项都会有一个不同的data-target值。

请注意，我们使用了方括号[]来表示属性绑定，这是Angular中的语法。方括号告诉Angular将表达式作为属性的值进行求值。

这是一个示例，展示了如何将*ngFor的值传递给data-target属性。你可以根据自己的需求进行修改和扩展。

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

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯区块链服务（TBCAS）：https://cloud.tencent.com/product/tbcs
腾讯元宇宙（Tencent Metaverse）：https://cloud.tencent.com/solution/metaverse

相关·内容

python接口测试：如何将A接口的返回值传递给B接口

另一种方式就是写死参数，不过除非是一些固定的参数，比如按照某个类型查询，类型是固定的，那么可以事先定义一个列表或字典存放类型值，然后依次遍历即可；否则一般不推荐写死参数，写死的话拓展性不强，换个测试环境...，脚本可能就运行不起来了还有就是通过接口获取想要的数据了，也就是一个接口能返回某些参数想要的值，那么就把这个接口的返回值传递给下个接口的参数这样一来，参数值是动态生成的，即使切换环境，也可以在新环境获取参数值...seq = label["seq"] # 从取出的一个标签中，获取其seq值 data = self.add_draft(seq)...这只是一个简单例子，实际情况可能更复杂一些，例如需要返回多个参数的情况或者把多个接口的返回值传递给一个接口等等；不过道理都是一样的，要学会分析接口返回内容的结构，提取自己想要的值。...seq = label["seq"] # 从取出的一个标签中，获取其seq值 data = self.add_draft(seq)

2K2 0

解决HTML select控件设置属性 disabled 后无法向后台传值的方法

大家都知道有时候修改数据的时候我们希望有一些数据是不可以修改的，通常情况下我们会将input框设置为 readonly ，但是 select 控件没有这个属性，需要使用另一个属性 disabled ，...但是接着又出现其他的问题就是将select控件设置为 disabled 后提交表单后台无法获取数据。...在网上找了很多方法，大家普遍使用的最多的就是在提交表单之前的时候把 select 的属性 disabled 设为 false 。...具体的做法就是在form元素添加一个onsubmit事件，绑定到下面这个函数，然后就大功告成了。

2.7K4 0

Vue父子组件之间的传值及父子组件之间相互调用属性或方法

Vue父子组建之间的传值：一、父子组建之间的传值 1.1 父组件向子组件传值父组件向子组件传值是通过属性的方式传值，传的值可以是任意类型，甚至可以是父组件的方法或者父组件对象本身。...，父组件在调用子组件时按子组件定义的属性传值。...父组件通过监听子组件自定义的事件获取子组件传的值 <!...（属性向子组件中传值）儿子这边：通过props属性(可以理解为接收到短信)，收到父亲发来的信息。然后就交往了。...：通过属性传入，子组件通过props定义与传入属性相同的变量接收；子组件向父组件传值：通过子组件的$emit自定义事件，父组件通过监听子组件定义的事件获取子组件传的值； 3.2 主动调用子组件或主动调用父组件的属性或方法

15K5 0

Angular 2 数据显示

本章节我们将为大家介绍如何将数据显示到用户界面上，可以使用以下三种方式：通过插值表达式显示组件的属性通过 NgFor 显示数组型属性通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...要显示组件的属性，插值是最简单的方式，格式为：{{属性名}}。...export class AppComponent { title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性的值...，并显示在浏览器中，显示信息如下：使用 ngFor 显示数组属性我们也可以循环输出多个站点，修改以下文件： app/app.component.ts 文件： import { Component }...: {{mySite}} 网站列表: {{ site }}

2.4K2 0

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

要访问hero的属性，请参考ngFor宿主元素（或其后代内）中的hero输入变量。在这里，英雄首先在插值中被引用，然后传递给组件的hero属性绑定。...它别无选择，只能拆除旧的DOM元素并插入所有新的DOM元素。 Angular可以通过trackBy避免这种流失。向组件添加一个返回NgFor应跟踪值的方法。在这个例子中，这个值就是英雄的ID。...电话按钮点击处理程序将输入值传递给组件的callPhone方法。但是一个指令可以改变这种行为，并将其值设置为别的东西，比如本身。 NgForm指令这样做。以下是Forms指南中表单示例的简化版本。...HeroDetailComponent.hero是HeroDetailComponent角度的输入属性，因为数据从模板绑定表达式流入该属性。...HeroDetailComponent.deleteRequest是从HeroDetailComponent角度来看的一个输出属性，因为在模板绑定语句中，事件流出该属性并处理该处理程序。

29.9K2 0

Angular核心-父子间组件传递数据-重难点

]="userName"> child2.ts子组件定义扩展属性 //普通属性不能被父组件传值 //child2Name:string = ''...//输入型属性：父组件可以利用这种属性传值进来 //得使用装饰器装饰一下 //装饰器要紧挨着要装饰的输入型属性 //并且一个装饰器只能管一个 //有很多输入型属性就必须写多个装饰器...父子组件通过触发特定事件（其中携带数据），把数据传递给父组件（父组件提供事件处理方法） Child.ts:自定义事件发射器–输出属性 import { Component, EventEmitter,...= e } //e就是子组件想传递给父组件的数据父子组件传递数据的简便方法：父组件直接使用子组件的引用：使用#为子组件声明识别符 <app-myc01...（不带#），第二个参数static指定该组件是否为“静态组件”—不会有时有时无的组件（比如ngIf，ngFor）注意：通过“ViewChild”-视图组件方式，父组件可以获得任意子组件中的数据，

1.2K2 0

AngularDart 4.0 高级-结构指令顶

该指南在谈论其属性以及指令的功能时引用了指令类。指南在描述如何将指令应用于HTML模板中的元素时引用了属性(attribute)名称。...这些是两个NgFor输入属性的名称。这就是指令如何得知列表是heroes，并且track-by功能是trackById。当NgFor指令遍历列表时，它会设置并重置其自己的上下文对象的属性。...Angular将它们设置为上下文的index和odd 属性的当前值。没有指定let-hero的上下文属性。它的原意是隐含的。...Angular设置let-hero为上下文的$implicit属性的值，NgFor已经用当前迭代的hero初始化了它的值。 API指南描述了额外的NgFor指令属性和上下文属性。...当NgSwitchCase的值与switch的值匹配时，会显示它的宿主元素。当没有同级NgSwitchCase匹配switch的值时，NgSwitchDefault显示它的宿主元素。

16K2 0

Angular 2 架构（下)

每种形式都有一个方向——从 DOM 来、到 DOM 去、双向，就像图中的箭头所示意的。插值 : 在 HTML 标签中显示组件值。... {{title}} 属性绑定: 把元素的属性设置为组件中属性的值。...在Angular中包含以下三种类型的指令：属性指令：以元素的属性形式来使用的指令。结构指令：用来改变DOM树的结构组件：作为指令的一个重要子类，组件本质上可以看作是一个带有模板的指令。... *ngFor 告诉 Angular...通过控制反转，对象在被创建的时候，由一个调控系统内所有对象的外界实体，将其所依赖的对象的引用传递给它。也可以说，依赖被注入到对象中。

2.2K2 0

AngularDart 4.0 高级-管道顶

The hero's birthday is {{ birthday | date }} 在插值表达式中，通过管道运算符（|）将组件的生日值传递给右侧的日期管道函数。...换句话说，您可以通过绑定来控制格式，就像您通过绑定控制生日值一样。编写第二个组件，将管道的格式参数绑定到组件的format属性。...管道类实现了PipeTransform接口的transform方法，该方法接受一个输入值，后跟一个可选参数并返回转换后的值。对于传递给管道的每个参数，transform方法都会有一个额外的参数。...从技术上讲，这是可选的; 无论角度如何，Angular都会查找并执行transform方法。现在您需要一个组件来演示管道。...--> 您通过文本字符串来识别排序字段，期望管道通过索引引用属性值（如hero

6.3K2 0

python测试开发django-191.Bootstrap3 轮播图（Carousel）

通过数据属性使用数据属性轻松控制轮播的位置。data-slide接受关键字prevor next，它改变相对于当前位置的幻灯片位置。...或者，使用data-slide-to将原始幻灯片索引传递给 carousel data-slide-to=”2”，这会将幻灯片位置移动到以开头的特定索引0。...该data-ride=”carousel”属性用于将轮播标记为在页面加载时开始动画。它不能与同一轮播的（冗余和不必要的）显式 JavaScript 初始化结合使用。...暂停字符串空值 “徘徊” 如果设置为”hover”，则暂停旋转木马mouseenter的循环并恢复旋转木马的循环mouseleave。如果设置为null，则将鼠标悬停在轮播上不会暂停它。...这两个事件都具有以下附加属性： direction：轮播的滑动方向（”left”或”right”）。 relatedTarget：作为活动项滑入到位的 DOM 元素。

3.5K1 0

AngularDart4.0 指南- 显示数据顶

最终的用户界面如下所示： ? 现场示例（查看源代码）演示了此页面中描述的所有语法和代码片段。用插值显示组件属性显示组件属性的最简单方法是通过插值来绑定属性名称。...使用插值，可以将属性名称放在视图模板中，并用双花括号括起来：{{myHero}}。按照设置说明创建名为displays_data的新项目。...修改后的模板使用双重大括号插值显示两个组件属性： template: ''' {{title}} My favorite hero is: {{myHero}} ''', Angular会自动从组件中抽取title和myHero属性的值，并将这些值插入到浏览器中。...在任一种样式中，模板数据绑定都具有对组件属性的相同访问权限。用* ngFor显示一个列表属性要显示英雄列表，首先向组件添加英雄名字列表，并将myHero重新定义为列表中的第一个名字。

5.3K1 0

ng 基础语法

*ngFor(同vue中v-for类似) 使用方式 //.ts中 import { Component } from '@angular/core'; //装饰器语法 @Comonent({ selector...list:[{name:'tom',age:19},{name:"jarray",age:20},{name:"lishao",age:18}] } //app-main.html <div *ngFor...//内部内容 *ngIf(同vue中v-if) 使用方式插值语法{{}}(和vue插值模板一样的) {{item.name}} 属性绑定 [] （和vue v-bind一样） {{item.name}} 事件绑定 () (和vue v-on效果类似，不过函数后要写（），表示立即执行） <div *ngFor

5921 0

1.2K2 0

Angular 6.x 指令快速入门

装饰器来获取指令宿主元素的属性值。...指令的作用该指令用于演示如何利用 Attribute 装饰器，获取指令宿主元素上的自定义属性 author 的值。...let item 和 index as i 会被转换为 let-item 和 let-i="index" ngFor 指令在列表上循环，每个循环中都会设置和重置它自己上下文对象上的属性。...Angular 把它们设置为上下文对象中的 index 属性的当前值。 let-item 并没有指定其上下文属性。它的来源是隐式的。...Angular 将 let-item 设置为此上下文 $implicit 属性的值。了解上述的语法，我们就可以灵活地定义属性自己的结构指令。

3.2K4 0

Angular2 之结构型指令几个概念

（* 与 template）控制宿主元素的模板。在哪里去显示，viewcontain 怎么注入，属性的set语法的使用，是便捷的监听属性值变化的途径。...是这三种指令中最常用的，我们会编写大量的组件来构建application。属性型指令属性型指令会修改元素的外观或者行为。 e.g. NgStyle可以修改元素的好几个样式。...NgIf案例分析该指令接受一个布尔值，并据此让一整块DOM树出现或者消失。注意：这里是出现或者消失，并不是隐藏。隐藏元素的利弊当我们隐藏元素时，组件的行为还在继续。...* 我们现在先把myUnless属性定义成一个“只写”属性。 * 属性值发生了变化，可以展示出来。...它把指令移到了标签上，成为该标签的一个属性绑定 —— 包装在方括号中。宿主组件的condition 属性的布尔值决定该模板的内容是否应该被显示。

3K2 0

Vue3 | 组件的定义及复用性、局部组件、全局组件、组件间传值及其校验、单项数据流、Non-props属性

属性配置必填效果 props块的default属性配置默认值 props块的validator属性配置参数值大小限制多个数据传参时常规写法使用Object方式优化v-bind传参 HTML中...传参类型校验传参类型校验支持：String、Boolean、Array、Object、Function、Symbol 等类型；关键：将props位的值，从数组形式换为对象（键值）形式，...键为承接属性，值为期望值类型： const app = Vue.createApp({ data() { return {...props块的required属性配置必填效果 props块的required属性配置true时，要求对应配置的属性要传参数，没有传参数，则报错；如下案例，配置了required属性为true...props块的default属性配置默认值如果没有传入参数到子组件，则使用default属性配置的默认值：如下例，配置默认值86868686886，不传参数进去子组件：

4.8K2 0

网站建设（一）进度条（一）

设置当前进度：结合官方给的HTML代码，不难看出该方法是设置进度条的值。调用时使用update(60)即可，当然，这是该插件的内部调用。 2. 例如设置为完成和重置进度条： 3....第六行当参数类型是字符串时进行处理，其实能用来传参的两个字符串只能是（‘finish’ 和 ‘reset’），也就是该插件内部提供的这两个方法。...我的demo演示的效果是，当点击上传文件按钮时，进度条从0开始，一直到100%。 4....该插件还提供一些 HTML 操作功能看这段代码可以知道，HTML元素需要至少三个属性， data-toggle='progressbar', 有该属性才能控制进度条； data-target=selector...，该属性表示控制哪个进度条； data-value=value, 该属性表示控制进度条到达什么值，也支持那两个字符串；具体使用见图：

3071 0

Angular核心概念：数据绑定

循环绑定：ngFor <any *ngFor=“let...Angular中的指令分三类： 1.组件指令：NG中Component继承自Directive 2.结构型指令：会影响DOM树结构，必须使用开头，如ngFor，*ngIf 3.属性型指令：不会影响DOM... 3.样式绑定：[ngStyle] 说明：ngStyle绑定的值必须是一个对象...4.样式绑定：[ngClass] 说明：ngClass绑定的值必须是一个对象！...对象属性就是CSS class名，属性值为ture/false,turn的话该class就出现；否则该class不出现（4）事件绑定() (click)=“zengjia”; 注意：事件名用（）括起来

3.5K1 0

Angular 显示英雄列表

hero 的属性。...添加如下 onSelect() 方法，它会把模板中被点击的英雄赋值给组件的 selectedHero 属性。... hero 属性，但它已经不存在了。...把显示英雄详情的 HTML 包裹在一个中。并且为这个 div 添加 Angular 的 *ngIf 指令，把它的值设置为 selectedHero。...当用户选择一个英雄时，selectedHero 也就有了值，并且 ngIf 把英雄的详情放回到 DOM 中。

4.4K7 0

浅谈Angular

属性绑定表示的是初始值大部分属性都是一一对应的,既有DOM属性,也有HTML属性但有一小部分属性,只有HTML属性没有DOM属性就算DOM属性和HTML属性名字一样,那也不是同一个东西...ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case...当前比特币的价格是:{{5000.123456 | currency:'JPY':true:'5.1-4'}} 5.Angular里路径传值: 商品展示

4.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云