首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 8:如何将*ngfor的值发送到TS文件

在Angular 8中,可以通过以下步骤将*ngFor的值发送到TS文件:

  1. 在HTML模板文件中,使用*ngFor指令来遍历一个数组或对象,并将其值绑定到HTML元素上。例如:
代码语言:txt
复制
<div *ngFor="let item of items">
  <p>{{ item }}</p>
  <button (click)="sendValue(item)">发送值</button>
</div>
  1. 在组件的TS文件中,定义一个方法来接收*ngFor的值,并进行相应的处理。例如:
代码语言:txt
复制
export class YourComponent {
  items: any[] = ['item1', 'item2', 'item3'];

  sendValue(value: any) {
    // 在这里处理接收到的值
    console.log(value);
  }
}

在上面的示例中,我们定义了一个items数组,并使用*ngFor指令将其值绑定到HTML元素上。每个元素都有一个按钮,当按钮被点击时,会调用sendValue方法,并将对应的值作为参数传递给该方法。在sendValue方法中,我们可以对接收到的值进行处理,例如打印到控制台或发送到服务器。

需要注意的是,上述示例中的items数组是在组件的TS文件中定义的,你可以根据实际需求来定义和初始化该数组。

关于Angular 8的更多信息和详细介绍,你可以参考腾讯云的官方文档:Angular 8开发指南

希望以上信息能对你有所帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 2 数据显示

本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式: 通过插表达式显示组件属性 通过 NgFor 显示数组型属性 通过 NgIf 实现按条件显示 ---- 通过插表达式显示组件属性...以下代码基于 Angular 2 TypeScript 环境配置 来创建,你可以在该章节上下载源码,并修改以下提到几个文件。...app/app.component.ts 文件: import { Component } from '@angular/core'; @Component({ selector: 'my-app'...{ title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性,并显示在浏览器中,显示信息如下: 使用 ngFor...显示数组属性 我们也可以循环输出多个站点,修改以下文件: app/app.component.ts 文件: import { Component } from '@angular/core'; @Component

2.4K20
  • Angular 6.x 基础教程

    (554 bytes) 即执行上述操作后,创建了两个文件: simple-form.component.spec.ts —— 用于单元测试 simple-form.component.ts —— 新建组件...除此之外,UPDATE src/app/app.module.ts 表示执行上述操作后,Angular CLI 会自动帮我们更新 app.module.ts 文件。...答案是在项目根目录下 angular.json 文件中,已经默认帮我们配置了默认前缀,具体如下: "angular6-fundamentals": { "root": "",...CREATE src/app/mail.service.ts (133 bytes) 即执行上述操作后,创建了两个文件: mail.service.spec.ts —— 用于单元测试 mail.service.ts...true even: boolean —— 若当前项索引是偶数,则返回 true odd: boolean —— 若当前项索引是奇数,则返回 true 需要注意是,*ngFor * 号是语法糖

    15.6K20

    Angular教程】-组件初识|8月更文挑战

    组件相关其他文件暂时先放一放,在Vue开发时候我们创建好组件总是要挂载后才能使用,那angular需要挂载吗?...应为angular项目创建时候默认初始化了git仓库,我们这会儿可以看到还有一个文件是有变化,那就是app.module.ts,打开文件后我看就看到了新创建组件已经自动挂载到了全局app上。...丰富一下我们组件 绑定属性 语法示例: 在组件ts文件中增加imgUrl属性: public imgUrl: string = 'assets...)">触发一下 在组件ts文件中新增print函数 print(event: Event) { console.log('[ print ] >>', 'hello world', '事件类型:..."不显示" : "显示" }} Hello World NgFor(内置): 给组件ts添加属性: public list: Array

    1.9K20

    ionic 中 cordova-plugin-inappbrowser组件使用

    ionic3中开发,基本和angular开发类似,只要了解一点angular开发知识便可以很容易上手。 简单介绍下 主要开发工作就是在pages文件夹下,看名字也知道是什么意思了。...每个页面是一个独立模块。文件名称不要重复,编译时会报错。 ? 项目结构 cordova-plugin-inappbrowser组件使用 这个组件看名字,大致应该知道是调用app内置浏览器。...在我们app中要嵌入第三方应用时候需要使用。 在这个例子中,我要实现便是个人介绍页面,链接到对应相关第三方博客中。...error handling during development { provide: ErrorHandler, useClass: IonicErrorHandler } ] 使用 ts...[] = [ {name: '更多内容', items:[ {name:"简书", url:"https://www.jianshu.com/u/8afb7e623b70

    2.3K20

    使用Angular8和百度地图api开发《旅游清单》

    前言: 本文目的是通过一步步实现一个旅游清单项目,让大家快速入门Angular8以及百度地图API。...我们将收获: Angular8基本用法,架构 使用百度地图API实现自己地图应用 解决调用百度地图API时跨域问题 对localStorage进行基础封装,进行数据持久化 material...UI使用 项目简介 《旅游清单》项目的背景主要是为了让笔者更好掌握angular8,因为之前做项目主要是使用vue和react,作为一名合格coder,必须博学而专一,也是因为笔者早年大学时期想要做一个想法...为循环指令,类似的*ngIf为条件判断,事件绑定用(click),我们看看组件ts文件对应写法: import { Component } from '@angular/core'; @Component...为根目录下文件,这里我用来做存储第三方组件位置,定义好之后在app.module.ts中引入: // material组件库 import { CustomMaterialModule } from

    6K30

    在前端中理解MVC服务之 Angular篇(完结)

    但是,了解应用所有部分如何相关联以及其结构方式非常重要。角度允许我们忘记DOM,所以,让user.view.ts文件从我们应用中消失。...最后,我们文件架构由以下JavaScript文件组成: user.model.ts —用户属性(模型) user.service.ts —管理用户所有操作 users.component.ts 负责加入...模型将具有以下字段: id 唯一 name 用户名 age 用户年龄 complete bool,可以知道此条数据是否有用 用户Class已经被写在TS中。...但是,我们注意到,前几部分中许多 DOM 操作代码已通过 Angular 得到解决,它们提供了两个结构指令,如 @ ngFor 和 _ ngIf,它们允许从模板本身轻松操作 DOM。...Controller 此体系结构最后一个文件则是Controller(user.controller.ts)。

    4.1K20

    Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)

    写在前面 在angular4项目中 例子是基于之前文章:利用angular-cli构建Angular4.X项目 可以参考官网:https://cipchk.github.io/ngx-weui/...1、如何使用第三方库,安装-引用(主要参考官方文档) 2、{{}}指令,单向绑定数据,声明数据-绑定数据 3、[(ngModel)]指令,双向绑定数据,声明数据-绑定数据 4、*ngFor指令,循环渲染...安装及引用 安装 npm install angular-weui --save 安装后还需要引用weui 样式以及我们font-awesome图标苦,在我们项目index.html中引用 <!...我选择固定中间按钮,使用动态绑定样式让中间部分高度等于页面高度-底部和顶部高度,设置overflo为scroll; 在accounting.component.ts中添加样式数据如下: contentStyle...这里写图片描述 引用非样式组件 例如提示框组件 html中添加元素 ts文件中引入使用

    2.2K20

    ​使用Angular和TypeScript开发单页应用详细教程

    Angular是一个强大前端框架,结合TypeScript语言,可以高效地构建现代化单页应用(SPA)。...然后通过以下命令安装Angular CLI:npm install -g @angular/cli步骤2:创建Angular应用使用Angular CLI创建一个新Angular应用。...使用以下命令生成一个服务:ng generate service data步骤5:定义数据模型在src/app目录下创建一个models文件夹,并在其中创建一个名为user.ts文件,定义一个简单用户数据模型...-- src/app/hello-world/hello-world.component.html --> {{ user.name...}} ({{ user.email }})步骤8:运行应用在应用目录中运行以下命令启动开发服务器:ng serve然后在浏览器中访问http://localhost:4200,你将看到你

    18110
    领券