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

Angular 6-如何使用*ngFor从表格中动态创建的输入框中获取component.ts输入值?

在Angular 6中,可以使用*ngFor指令从表格中动态创建输入框,并通过component.ts文件获取输入值。下面是一个完整的示例:

首先,在component.html文件中,使用*ngFor指令循环创建表格行,并在每一行中创建一个输入框:

代码语言:html
复制
<table>
  <tr *ngFor="let item of items">
    <td>
      <input type="text" [(ngModel)]="item.value">
    </td>
  </tr>
</table>

在component.ts文件中,定义一个items数组来存储输入框的值,并在组件初始化时初始化该数组:

代码语言:typescript
复制
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  items: any[];

  ngOnInit() {
    this.items = [
      { value: '' },
      { value: '' },
      { value: '' }
    ];
  }
}

现在,当用户在输入框中输入值时,该值将自动存储在items数组中的相应位置。

你可以根据实际需求修改items数组的初始化大小和初始值。

这是一个简单的示例,你可以根据自己的需求进行扩展和修改。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。

腾讯云云服务器(CVM)是一种可扩展的计算服务,可提供安全可靠的云端计算能力,适用于各种应用场景。

腾讯云数据库(TencentDB)是一种高性能、可扩展的云数据库服务,支持多种数据库引擎,适用于各种规模的应用程序。

更多关于腾讯云云服务器和腾讯云数据库的信息,请访问以下链接:

腾讯云云服务器:https://cloud.tencent.com/product/cvm

腾讯云数据库:https://cloud.tencent.com/product/cdb

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

相关·内容

AngularDart4.0 指南- 表单 顶

一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制双向数据绑定。 跟踪状态变化和表单控件有效性。...请注意提交按钮被禁用,并且输入控件绿色变为红色。 您将以小步骤构建此表单: 创建英雄模型类。 创建控制表单组件。 用初始表单布局创建一个模板。...顺便说一句,您可以注入数据服务来获取和保存真实数据,或者将这些属性作为输入和输出(请参阅“模板语法”页面输入和输出属性)来绑定到父组件。 这不是现在问题,这些未来变化不会影响表单。...你知道如何从早期页面做到这一点。 显示数据教导属性绑定。 用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示值更新组件属性。 现在您需要同时显示,聆听和提取。...提交标志变为真,表格消失。 您将看到表格显示英雄模型(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交标志。 当您单击编辑按钮时,该表消失,并且可编辑表单重新出现。

17.4K30

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

他们在输入框输入文字。 他们列表中选择项目。 他们点击按钮。 这样用户操作可能导致数据流向相反方向:元素到组件。 了解用户操作唯一方法是侦听某些事件,例如按键,鼠标移动,点击和触摸。...在Angular你不需要这些指令。 通常,您可以使用功能更强大,表现力更强Angular绑定系统获得相同结果。 当你可以写一个简单绑定时为什么要创建一个指令来处理点击呢?...如何输入框中提取当前显示文本,以便更新数据属性? 谁想每一次都看看? 该ngModel指令隐藏了自己ngModel输入属性和ngModelChange输出属性背后这些繁重细节。...模板输入变量 hero之前let关键字创建一个名为hero模板输入变量。 ngFor指令迭代由父组件heroes属性返回heroes,并在每次迭代期间将hero设置为列表的当前项目。...* ngFor与index(索引) NgFor指令上下文index属性返回每个迭代项目的从零开始索引。 您可以捕获模板输入变量index,并在模板中使用它。

29.9K20

AngularDart4.0 指南- 用户输入

绑定到用户输入事件 您可以使用Angular事件绑定来响应任何DOM事件。 许多DOM事件由用户输入触发。 绑定到这些事件提供了用户获得输入方法。...本节介绍如何绑定到输入框按键事件,以在每次按键后获取用户输入。 下面的代码监听一个keyup事件,并将整个事件有效载荷($ event)传递给组件事件处理程序。...每次调用之后,onKey()方法将输入框附加到组件values属性,后跟一个分隔符(|)。 该模板使用Angular({{...}})来显示属性。...代码使用box变量来获取输入元素,并在标签之间进行插显示。 模板是完全独立。 它不绑定到组件,组件什么也不做。 在输入框输入内容,然后观看每个按键显示更新。 ?...您可以元素任何兄弟或子元素引用newHero。 传递,而不是元素。 取而代之是将newHero传递给组件addHero()方法,获取输入框并将其传递给addHero()。

3.4K00

Angular 6.x 基础教程

ngFor 指令 在 Angular 我们可以使用 ngFor 指令来显示数组每一项信息。...; 语法迭代数组每一项,另外我们使用 index as i 用来访问数组每一项索引。...true even: boolean —— 若当前项索引是偶数,则返回 true odd: boolean —— 若当前项索引是奇数,则返回 true 需要注意是,*ngFor * 号是语法糖...当在 SimpleFormComponent 组件修改 input 输入框文本消息后,点击更新按钮,将会调用 AppComponent 组件类 onUpdate() 方法,更新对应信息。...用过 AngularJS 1.x 同学,对 ng-class 应该很熟悉,通过它我们能够根据条件,为元素动态添加或移除对应样式。在 Angular ,对应指令是 ngClass 。

15.6K20

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

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

2.2K20

Angular DOM 抽象概述

通过 DOM API 我们能够方便地获取指定元素,比如获取谷歌首页 id 为 q 输入框: document.querySelector("#q"); 查询结果为: 元素,在 Angular 内部它主要应用在结构指令,比如 *ngIf、*ngFor 等。...示例 前面我们已经介绍了如何使用 HTML5 template 模板元素,下面我们来看一下如何使用 元素。...动态创建组件流程如下: 获取装载动态组件容器 在组件类构造函数,注入 ComponentFactoryResolver 对象 调用 ComponentFactoryResolver 对象 resolveComponentFactory...() 方法创建 ComponentFactory 对象 调用组件容器对象 createComponent() 方法创建组件并自动添加动态组件到组件容器 基于返回 ComponentRef 组件实例

3.5K30

AngularDart4.0 指南-体系结构概述 顶

该类通过属性和方法API与视图交互。  例如,这个HeroListComponent有一个heroes属性,返回服务获取英雄列表。...这是告诉Angular这个组件构造函数需要HeroService一种方法,这样它就可以获得显示英雄列表。 ? @Component元数据告诉Angular哪里获取为组件指定主要构建块。..."> 在双向绑定,与属性绑定一样,数据属性将从组件输入输入框。...关于依赖注入要点: 依赖注入连接到Angular框架,并在任何地方使用。 注入器是主要机制。        注入器维护它创建服务实例容器。        注入器可以提供者创建服务实例。...HTTP:与服务器通信以获取数据,保存数据并使用HTTP客户端调用服务器端操作。 Lifecycle hooks:通过实现生命周期钩子接口,触及组件生命周期中关键时刻,创建到销毁。

7.9K30

AngularDart 4.0 高级-生命周期钩子 顶

Angular团队负责人Misko Hevery解释了为什么您应该避免使用复杂构造函数逻辑。 不要在组件构造函数获取数据。您不应该担心当在测试下创建或决定显示之前时新组件会尝试联系远程服务器。...构造函数不应仅仅将初始局部变量设置为简单。 ngOnInit是组件获取其初始数据好地方。 教程和HTTP章节显示了如何。 还要记住,指令数据绑定输入属性在构建之后才会设置。...hero属性是对hero对象引用。 Angular并不在意英雄自己name属性发生了变化。 英雄对象引用没有改变,所以Angular角度来看,没有改变反馈!...在用户可以做任何事情之前,在这个例子它被调用了二十次。 大部分初始检查都是由Angular在页面其他地方首次渲染(与数据无关)而触发。 仅仅通过鼠标移动到另一个输入框就会触发一个呼叫。...以下AfterContent挂钩根据内容子代(只能通过使用@ContentChild注解属性查询它)进行更改。

6.1K10

AngularDart 4.0 高级-结构指令 顶

这些是两个NgFor输入属性名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己上下文对象属性。...Angular设置let-hero为上下文$implicit属性NgFor已经用当前迭代hero初始化了它。 API指南描述了额外NgFor指令属性和上下文属性。...当你编写自己结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor源代码是了解更多信息好方法。 模板输入变量 模板输入变量是一个变量,其可以在模板单个实例引用。...TemplateRef和ViewContainerRef 像这样一个简单结构指令Angular生成创建一个嵌入式视图,并将该视图插入与指令原始宿主元素相邻视图容器...在没有合适宿主元素时使用作为分组元素。 Angular将星号(*)语法解析为。 NgIf,NgFor和NgSwitch内置指令如何工作。

16K20

AngularDart 4.0 高级-HTTP 客户端 顶

= null">{{errorMessage}} 模板ngFor指令显示heroes列表.列表下面是输入框和Add Hero按钮,允许用户添加新英雄....一个模板引用变量, newHeroName, 赋予(click)事件绑定存取输入框. 当用户单击按钮时, 单击处理程序传递输入到addHero()方法. 单击处理程序清空输入框....获取数据 在之前示例,应用通过返回服务模拟英雄来伪造与服务器交互: import 'dart:async'; import 'package:angular/angular.dart';...之后,请记住恢复其原始。 发送数据到服务器 已经知道了如何使用远程HTTP服务恢复数据.下一项任务是添加增加英雄并保存到后端能力....现在,请参阅演示源代码以获取使用WikipediaJSONP API示例。

9.6K10

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

在下面的章节,您将学习如何通过数据绑定来动态获取和设置DOM(文档对象模型)数据绑定插第一种形式开始,看看有多少更丰富模板HTML可以使用。请回到顶部。 插({{...}})...它是一个事件全部。 就是如何用户操作更新应用程序状态。 响应事件是Angular“单向数据流”另一面。在事件循环这个周期中,您可以自由地在任何地方进行所有更改。...然后,您将学习如何使用封装了HTML组件创建新元素,并将它们放入模板,就好像它们是原生HTML元素一样。 <!...当用户在输入框输入“Sally”时,DOM元素属性变为“Sally”。...您不能使用属性绑定将目标元素拉出。 您不能绑定到目标元素属性来读取它。 你只能设置它。 同样,您不能在目标元素上使用属性绑定来调用方法。

5.1K10

Angular 6.x 快速入门

第二节 - 插表达式 在 Angular ,我们可以使用语法实现数据绑定。...基础知识 ngIf 指令简介 该指令用于根据表达式动态控制模板内容显示与隐藏。它与 AngularJS 1.x ng-if 指令功能是等价。... ngFor 指令简介 该指令用于基于可迭代对象每一项创建相应模板。它与 AngularJS 1.x ng-repeat 指令功能是等价。...1.x 表单 ) Reactive Forms - 响应式表单 本小节主要介绍模板驱动式表单,接下来我们来演示如何通过表单来为我们之前创建 UserComponent 组件,增加让用户自定义技能功能...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载组件时,它将动态创建对应组件,并将其作为兄弟元素,插入到

14.1K20

AngularDart4.0 指南- 显示数据 顶

使用,可以将属性名称放在视图模板,并用双花括号括起来:{{myHero}}。 按照设置说明创建名为displays_data新项目。...> ''', Angular会自动组件抽取title和myHero属性,并将这些插入到浏览器。...这是语法重要组成部分。 有关更多信息,请参阅模板语法页面。 注意ngFor指令hero变量; 它是模板输入变量一个例子。...在“模板语法”页面的microsyntax部分阅读有关模板输入变量更多信息。 Angular为列表每个项目复制,将hero变量设置为当前迭代项目(英雄)。...回到app_component.dart并删除或注释掉英雄列表一个元素。 浏览器应该自动刷新,消息应该消失。 概要 现在你知道如何使用: 用双花括号插入来显示组件属性。 ngFor显示项目列表。

5.3K10

Angular v8 发布!来看看有什么新功能

为了将类似这样计算甩给后台,我们必须首先用 Angular CLI 创建 一个Web worker: 1ng generate worker n-queens 此语句不仅为 worker 创建文件,还为构建过程和现有文件条目创建配置文件...如果同一文件夹包含具有公共文件扩展名 .component.ts 同名组件,则 CLI 甚至会使用与 Web worker 通信代码对其进行丰富。...虽然它们在早期版本中被用于组件请求不在结构指令内元素,如 ngIf 或 ngFor,但查询结果已在 ngOnInit 可用。...这只在不在结构指令时才有效。使用 static:false 时,在启动或刷新视图后进行解析。 ng update 命令 会自动尝试在此处输入正确。...有关如何使用 $location 替换详细描述(用于更好地交织两个框架)可以在这里找到。此外,你现在可以找到延迟加载 AngularJS 想法,它基于前面提到动态 ECMAScript 导入。

3K30

最受欢迎10大Angular技巧

/ 扩展 Observable 或 Subject 我看到许多开发人员在他们应用创建了出色服务。...s=20 控件为 ReplaySubject 在某些情况下,你需要订阅控件 valueChanges 并获取其当前。不要重新发明轮子,只需这样做即可: ?...s=20 扩展 Observable 或 Subject 你知道如何分辨使用高 DPI 屏幕用户吗? 你可以这样做检查,并用原生媒体标签使你应用更适合高 DPI 屏幕: ?...令我有些难过是,一些 Angular 开发人员不喜欢创建自己管道,可其实你几乎可以在任何数据转换场景创建管道。 这是适用于许多情况通用管道示例: ?...s=20 你甚至可以制作自己 ngFor 替代品 最后一个:Angular 对于 for...of... 之类指令有特殊语法。这样,你可以创建自己 ngFor

2.1K40

Angular—都2019了,你还对双向数据绑定念念不忘

Angular写法: // component.ts ... name = 'John'; ......写法上略有不同,目的和实现效果却是一样,当js或ts文件name发生变化时,html模板会发生改变,反之,当用户在input输入时候,js或ts文件name也会发生相应改变...Angular’双向数据绑定‘ 没有黑魔法 Angular努力拥抱web标准,不创造新名词,也不使用什么黑魔法,那么双向绑定是如何实现呢?事实上通过属性绑定和事件,这并不难做到。...$event可以视作获取输出关键字,不同场景下代表对象是不同,上面这段代码由于是监听了input事件,所以它代表就是 InputEvent,通过属性查询我们获取到了事件上传递。...输入+输出===双向绑定 现在,我们只需要使用简写写法把它们合起来,这就是‘双向绑定’ 为什么这样写组件数据会被修改?

4.3K30
领券