Angular 6-如何使用*ngFor从表格中动态创建的输入框中获取component.ts输入值？
在Angular 6中，可以使用*ngFor指令从表格中动态创建输入框，并通过component.ts文件获取输入值。下面是一个完整的示例：
首先，在component.html文件中，使用*ngFor指令循环创建表格行，并在每一行中创建一个输入框：
<table>
<tr *ngFor="let item of items">
<td>
<input type="text" [(ngModel)]="item.value">
</td>
</tr>
</table>在component.ts文件中，定义一个items数组来存储输入框的值，并在组件初始化时初始化该数组：
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）是一种高性能、可扩展的云数据库服务，支持多种数据库引擎，适用于各种规模的应用程序。
更多关于腾讯云云服务器和腾讯云数据库的信息，请访问以下链接：
相关·内容
我有不同id的输入类型在*ngFor中执行。我想要获取所有输入类型的id和数据，在这些输入类型中，用户在*ngFor外单击按钮时输入了文本。下面是我写的代码： Angular HTML Code --
<div *ngFor="let number of [0,1,2,3,4,5,6] ; let i = index" style="margin-top:10px;">
<input type="text" (value)="Value=$event" id="val-{{i}}
浏览 8提问于2019-05-03得票数 0
在我的Angular 5应用程序中，我有一个输入框，当按下enter时，它会调用一个返回数组的API。然后在mat-select中使用该数组来填充mat-options。第一个项目会自动选中，但显示值永远不会更新。
换句话说，当mat-select填充了动态数据时，对其ngModel的赋值不会反映在其显示值中。
component.html
<mat-form-field>
<input matInput placeholder="Order ID" [(ngModel)]="orderID (keydown)="handleKeyDo
浏览 1提问于2018-05-18得票数 3
我已经在angular11中创建了动态表单输入。需要通过单击添加按钮来验证动态添加的表单域。我找不到正确的解决方案。以下是我的代码 在component.ts文件中 this.pollAdd = this.fb.group({
question: ['',Validators.required],
queChoices:this.fb.array([this.createChoice()]),
});
addChoice(){
this.queChoices=this.pollAdd.get('queChoices')
浏览 35提问于2021-04-15得票数 0
1回答
这是一个Angular 5和Firestore项目。我正在使用一个带有[(ngModel)]的表单来更新数据库中的文档。更新成功。但是[(ngModel)]在输入框中显示文档字段值的方式是不正确的，例如占位符是错误的。每个输入框都显示相同的字段值，而它们应该是不同的。例如
在数据库中，我的文档如下所示
document
field1: document title
field2: google
field3: https://www.google.com
但我的输入框显示了以下内容
input box 1显示https://www.google.com
input box 2显示h
浏览 2提问于2018-06-29得票数 1
从后端响应Json {
"INCOME": {
"TOURIST": [{
"vehicleNumber": "TN 47 RG 4567",
"details": [{
"id": 01,
"amount": 100
},{
"id&#
浏览 18提问于2020-07-17得票数 0
回答已采纳
我是angular 6的新手，正在使用bxslider。它与数组一起工作得很好，但我使用*ngFor作为动态它不工作。如何为动态数据重新初始化。 使用数组可以很好地工作 <div class="bxslider">
<div *ngFor="let slide of sliders"><img [src]="slide.url"></div>
</div> 动态不工作 <div class="bxslider">
<div *ngF
浏览 18提问于2019-01-16得票数 1
我使用ViewChildren创建了一组表格单元(td html元素-动态创建)的ElmentRef(QueryList)。我进行了调试，并设置了可用的元素。 当我单击特定的that元素时，我调用了一个函数，在该函数中，我需要找出ElementRef(QueryList)中的哪个元素被单击了。我该怎么做呢？ component.html <table>
<tr *ngFor="let i of Arr">
<ng-container *ngFor="let j of Arr">
浏览 19提问于2019-03-28得票数 1
回答已采纳
2回答
下面的表包含动态生成的行输入框，这些行可能包含默认值。如果数据库中没有可用的默认值，则返回空字符串''。问题是，这会导致表被折叠到这些输入上。
<tr *ngFor="let d of displayData">
<td class=".mytable"> {{d.specRow}} </td>
<td *ngFor="let l of d.limitModel ">
<input type="text" [ngModel]=
浏览 5提问于2022-10-24得票数 0
2回答
我想使用我动态添加的多个。但我不能用@viewChild。请提出解决这个问题的方法。
Template.html :
<div *ngFor="let name of title;let i = index;">
<ion-slides id="something" #slides>
//some code
</ion-slides>
</div
Component.ts :
@ViewChild('slides') slides: QueryList<Slid
浏览 0提问于2018-02-01得票数 21
回答已采纳
嗨，我正在做angular6项目。我在设计表格。在这两个输入域中，一个是card_no，另一个是type_of_card。当我们在card_no输入字段中输入卡片编号时，点击enter后，它应该在type_of_card输入字段中显示卡片的类型，具体取决于卡片编号。如何在angular中实现这一点。请帮帮忙！
浏览 14提问于2019-10-04得票数 0
1回答
Angular2，在my component.ts中，我获取一个视频对象列表并存储在_videos:Video[]中
在我的html中，我显示视频，
<tr *ngFor="#video of _videos">
现在我想在html中创建一个搜索输入字段来过滤视频。我试着用烟斗：
import {Pipe,PipeTransform} from 'angular2/core';
@Pipe({
name: 'textfilter'
})
export class TextFilterPipe implements PipeTr
浏览 2提问于2016-05-11得票数 1
回答已采纳
在我的angular 2应用程序中，头部是动态设置的。我整理了我的JSON数据，如附件图片所示。我想使用Table标题作为搜索词(例如: Name或Position或Extn)来过滤整个数据。
我将结果数据分成键和值，如下所示：
this.keys= Object.keys(this.ResultData_search[0])` // my table heading false here
in my template :
<table>
<tr>
<th *ngFor=" let key of keys,let i=index">
浏览 0提问于2017-05-24得票数 0
1回答
我想要的角度应用程序过滤数据从下拉，产品列表与产品编号相关联。下面是JSON结构。
component.ts
productlistArray = [{
number: "1",
productlist: [
{ name: "product_1_0" },
{ name: "product_1_1" }
]
}, {
number: "2",
productlist: [
{ name: "product_2_0" },
浏览 1提问于2019-09-22得票数 0
2回答
我对angular是个新手。我正在尝试在组件中呈现一些来自服务器的动态模板字符串。
该组件如下所示-
<div [innerHTML]='templateString'></div>
在component.ts文件中，我们有
obj = {
prop: 'text to display'
}
templateString = '<p class="text-primary">{{obj.prop}}</p>' // this is dynamic, e.g. received
浏览 52提问于2020-02-25得票数 2
2回答
我有一个动态导航栏，上面有搜索功能。
Component.html
<input type="text" class="form-control" placeholder="Navigation search..." [(ngModel)]="searchString">
<li class="nav-item " *ngFor="let dir of directories">
<a href="javascript:;" class="
浏览 2提问于2017-07-28得票数 1
回答已采纳
我需要在Html中呈现一个动态表格，我不知道每行的模板是什么:有时它包含2列，有时包含4列……
我需要这样的东西：
<div>
<h1>Angular HTML Table Example</h1>
<table>
<thead>
<tr>
<th>#ID</th>
<th>Name</th>
<th>Email</th>
浏览 0提问于2020-07-14得票数 0
2回答
你好，我正在学习angular，我需要一个功能上的帮助，我有一个动态表和一个表单，当我点击动态表格的任何一行时，数据应该填充在表单的输入框中，当我编辑和保存输入框中的数据时，应该反映出相同的变化。`
$scope.Save= function($index){
var user1= angular.copy($scope.displayData[$index]);
fc.saveData.push(user1);
console.log(fc.saveData.name);
}}
<head>
<s
浏览 0提问于2016-02-20得票数 3
回答已采纳
5回答
我需要将第一个输入框的值复制到第二个输入框。这些输入框的id和名称来自于表格。修复的是诸如“Code”和“Copy Code”之类的标签。
<label>Code</label>
<input type="text" value="1234" id="custcode_1" />
<label>Copy Code</label>
<input type="text" value="" id="custcode_2" />
浏览 0提问于2017-12-08得票数 1
12回答
如何自动对焦输入元素？类似于问题，但与AngularDart不同。就像这样：
<input type="text" [(ngModel)]="title" [focus] />
//or
<input type="text" [(ngModel)]="title" autofocus />
Angular2是否有支持此特性的构建？
最好的关闭问题是，但是有没有更短/更简单的解决方案，因为我没有“输入框列表”。在提供的链接*ngFor="#input of inputs"是使用，但我只有一个
浏览 8提问于2017-01-26得票数 73
回答已采纳
我刚接触Angular，我读过很多关于我的问题的讨论，但没有找到解决方案。我的正面正在为我的ngFor生成一个。
我可以在控制台中看到，我是从API获取数据的。有人能帮我吗？
这是我的component.ts
import { Component } from '@angular/core';
import { environment } from '../../../environments/environment';
import { BasicRequestsService } from '../services/basic-requests.
浏览 35提问于2020-02-29得票数 0
回答已采纳
我正在尝试构建一个“编辑到位”的输入表单，以便在用户单击该字段时更改产品的名称。我的问题是使用ngFor循环打印出有问题的name字段，我不知道会有多少个，每个用户都会有不同的。是否有一种方法可以动态更改nameField，然后引用表单中的动态名称？我想是这样的: nameField1，nameField2等，但是使用了ngFor=的循环“let item of nameField2”
html：
<tr *ngFor="let item of crudService.subscriptions.subscriptions; index as i">
<
浏览 2提问于2020-06-26得票数 0
回答已采纳
我想在parent component template using ngFor指令中插入一个动态的组件列表，为列表中的每个组件创建ng-template主机占位符。我尝试过的：
将插入动态组件的组件模板：
<div *ngFor="let component of components;let i = index">
<ng-template #dynamiccomponenthost></ng-template>
</div>
component.ts
@Input()
components: any;
@Vie
浏览 1提问于2020-09-27得票数 1
我正在使用Angular，我想轻松地验证一个数字输入。我希望当用户在输入中键入超出范围的值(小于1且大于99)时，输入不会改变。我不想用表格。 我设计了一个组件，在几个部分中显示动态数据，我没有使用Angular的表单工具就实现了它。剩下的唯一问题是，用户不能在数字输入中输入小于1且大于99的值。输入类型为number。我不知道如何防止用户在不使用Angular的表单的情况下输入超出范围(小于1且大于99)的字母和值。输入是使用ngFor动态生成的。输入行为(允许用户输入任何内容，即使我们使用的是number类型)，糟糕的HTML5验证特性，以及缺乏处理小问题的灵活性，这些都困扰着我。 我的
浏览 14提问于2019-02-14得票数 0
7回答
如何从Angular 4中的select选项获取值？
我想把它赋给component.ts文件中的一个新变量。我已经尝试过了，但是什么也没有输出。
你也可以使用(ngModel)来做吗？
component.html
<form class="form-inline" (ngSubmit)="HelloCorp(f)" #f="ngForm">
<div class="select">
<select class="form-control col-lg-8"
浏览 0提问于2017-09-27得票数 46
1回答
我的目标是当单击列表/表格的任何行时调用一个函数。无法使其工作，所以现在我只想单击每行的第一列并调用该函数。
component.html是这样的，使用@angular/material：
<ng-container *ngFor="let item of items">
<md-grid-tile class="grid-box-row" ng-click="onRowClicked(item)"> {{item.id}} </md-grid-tile>
... ...
编译后的HTML如下所
浏览 1提问于2017-04-11得票数 3
回答已采纳
完整的错误消息是：
angular2.dev.js:23597异常:在myComponent@7:12中的表达式'ngClassUntouched‘在检查后发生了更改。以前的价值：“真”。当前值: MyComponent@7:12中的ngClassUntouched中的“false”
错误指向此控件：
<input [(ngModel)]="searchTxt" class="searchText" type="text"
class="form-control" placeholder="Sear
浏览 5提问于2016-03-31得票数 3
回答已采纳
1回答
我正在用角10开发一个应用程序，我已经创建了一个递归组件，它显示了包含不同输入字段(复选框、单选按钮、文本输入等)的动态“表单”。这是my-component的HTML代码的一个小例子。
<select [(ngModel)]="valueChosen" name="field" id="field">
<option *ngFor="let data of datas" [ngValue]="data.code">{{data.text}}</option>
浏览 1提问于2021-05-16得票数 0
2回答
我有一个用于打印数组内容的for循环。我想强调一句。
数组存储在我的component.ts中，以及突出显示的行中(但为了简化，我将把它修正为1)
我知道这很管用：
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<body ng-app="">
<div ng-style="{color: (1==1)?'aqua':'black'}">Sample Text</d
浏览 2提问于2021-05-13得票数 0
回答已采纳
我的app/component.ts里有这个
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<ul>
<li *ngFor="let course of courses">
{{ course }}
</li>
</ul>
`,
styleUrls: ['./app.component.
浏览 10提问于2017-06-13得票数 0
回答已采纳
总的来说，我对角和前端的开发相当陌生，但我不明白为什么onSubmit方法没有得到我输入的值，在输入框中，我根据角表单教程完成了它，但是它不起作用。
我在这里试图做的是创建一个book对象，并通过http方法将它发送到我的API，但是表单返回空值。
我的component.html表格。
<form [formGroup]="book" (ngSubmit)="onSubmit(book.value)">
<label>Title</label>
<input type="text
浏览 1提问于2019-12-16得票数 5
回答已采纳
1回答
我用的是角2RC-4。每当输入框发生更改时，我都会尝试发出网络请求。但是请求被打了两次电话。
我的代码看起来是：
component.ts
this.term = new Control();
this.suggestions = this.term.valueChanges
// .debounceTime(1000)
// check if the search term's length is >= 1
.filter(term => term && term.length)
// switchMap
浏览 0提问于2016-08-03得票数 7
回答已采纳
我有一个显示购物车产品的表格，在数量字段中，我有一个用户可以选择增加或减少数量的选项，如果我在for循环中有update btn，它为每个提供单独的btn，但我需要在for循环外部获得输入字段的所有值的单个update btn。 <tbody *ngFor="let cartproducts of cartpro.cartproducts ">
<input id="number" type="number" value="{{cartproducts.quantity}}" (chang
浏览 24提问于2021-04-30得票数 0
我有几个字段像这样连接到FormBuilder。
constructor(private builder: FormBuilder) {
this.form = builder.group({
"firstName": [...],
"lastName": [...]
});
}
在标记中，除了修复控件之外，我还将有一个未知数量的输入框。它从零开始，并且可以增加，因为用户点击一个按钮，它通过每次点击添加一个新的输入框。每个输入框都会有一个删除按钮，因此这些输入框的数量是完全动态的。
<div class="input-cap
浏览 9提问于2017-08-24得票数 1
回答已采纳
1回答
我正在使用Angular材料在Angular 2中设计一个表单。我必须为我的输入框分配一个标签。为此，我需要使用aria-label。这是我的代码，在其中我必须在"Department“选择框之前应用标签：
<mat-form-field >
<mat-select placeholder="Department" [(value)]="selecteddept" >
<mat-option *ngFor="let department of departments"
[value
浏览 2提问于2018-01-11得票数 0
回答已采纳
我有一个Angular 4项目，我正在尝试使用库以表格格式显示我的数据。我能够处理他们网站上的硬编码数据。我有所有的按钮(复印，打印，excel)工作正常。但是，当我尝试显示我使用服务从SQL数据库中获取的数据时，我可以在表中显示数据，但所有按钮都不起作用。我甚至在表格中有No data available in table文本。
我的html代码：
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
浏览 1提问于2018-08-15得票数 1
回答已采纳
我想使用formControlName和formArray在angular6中动态创建的input表单上设置formGroup和formArray。
component.html :
<form [formGroup]="ecosystemFormG" novalidate>
<div formArrayName="transactions">
<div [formGroupName]="i" *ngFor="let transaction of getTra
浏览 1提问于2018-06-08得票数 1
回答已采纳
3回答
如何删除选定的输入值
、、、、
我使用的是角6应用程序，我尝试使用输入框进行多个选择，而不使用--任何第三方插件、jquery、datalist、选择框，它都是纯输入框，基于类型文本。
HTML:
<div class="autocomplete">
<input name="suggestion" type="text" placeholder="User" (click)="suggest()" [formControl]="typeahead">
<div class="aut
浏览 2提问于2018-08-22得票数 0
回答已采纳
1回答
我正在尝试用javascript添加一个页面搜索功能。我在看。
它在iframe内动态创建输入元素，以跳过搜索输入框中的文本。我在我的项目上运行了bootstrap，而动态内容没有获得bootstrap样式。如何使用bootstrap设置输入框和提交按钮的样式？
浏览 2提问于2014-10-11得票数 2
我正在处理一个问题，在这个问题上，我需要根据用户通过textbox提供的输入生成表的动态行。
我的.ts代码：
start(val){
this.printVal=val;
console.log('Value of start is',this.printVal);
return new Array(val);
}
.html代码：
<div class="container col-lg-12">
<input type="number" #data>
<
浏览 0提问于2019-04-10得票数 0
回答已采纳
我有一个angular2应用程序，我有这样的结构
车身组分
-车身顶部构件
-车身底部部件
我在顶部组件中有一个输入框"Filter Data“，在主体底部组件中有一个数据表和一个管道"filterData”。
车身顶部构件:：
<input [(ngModel)]="searchInputBox" type="text" name="searchInputBox" >
车身底部构件:：
<tr *ngFor="let d of data | filterData:searchInputBox&#
浏览 4提问于2017-03-20得票数 0
回答已采纳
1回答
对于Angular来说，我是个新手，我花了大约一周的时间阅读文档，但我仍然不能解决这个问题。如果我们有一个角材料芯片列表，如下面的代码
<input type="text" name="fname" size=35>
<p></p>
<mat-chip-list>
<mat-chip *ngFor="let dt of chips">{{dt}}</mat-chip>
<mat-chip >One fish</mat-chip>
<m
浏览 4提问于2018-09-27得票数 2
2回答
我正在构建自定义的自动完成，如下拉使用angular7。我的html在我的component.html里
<div class="wrapper">
<div class="row mt-3">
<div class="col-6">
<input type="text" class="form-control" placeholder="text here" (keyup)="credentialsSearchFilter(
浏览 3提问于2019-11-18得票数 0
回答已采纳
2回答
我在Angular上有一个表单，它允许根据在下拉列表中选择的值显示输入。
下面是我的代码示例：
(如果选择了两个，则会出现输入)
如果我保留formGroup = "usForm“，则输入显示不起作用。另一方面，如果我删除了标签表单的formGroup = "usForm“，我的代码就会按我想要的那样工作。所以这个问题与formGroup = "usForm“有关
我的html：
<div class="offset-md-2">
<form [formGroup]="usForm">
<di
浏览 0提问于2018-11-19得票数 8
回答已采纳
2回答
你好，我正在angular4中创建一个搜索管道，它从Json数据中过滤公司的团队大小，输入范围从0到100。范围过滤器不工作，我是新的打字稿和angular4，请帮助我做一些基本的代码，但我没有得到的逻辑。
靶场管-
@Pipe({
name: 'range'
})
export class CheckboxPipe implements PipeTransform {
transform(value: any, args?: any): any {
console.log('args', args);
return args
浏览 1提问于2017-09-13得票数 0
回答已采纳
我使用的是Angular 4.4.7和typescript 2.3的ag-grid 11。当我将焦点放在网格单元格中的输入框上，并且在html表格中使用tab键将焦点移动到下一个网格单元格时，光标将移动到地址栏，而不是移动到下一个输入框。
如果有人遇到了同样的问题并有解决方案，请让我知道。
谢谢。
浏览 0提问于2018-09-17得票数 0
在我的前端(角)，我有一个有许多输入字段的形式。我想要一个具有数据库元素列表(csv格式)的特定字段。因此，我从服务器java中请求检索包含数据库所有项的列表(listOfArticles，它是一个对象数组)。
Component.ts：
getListBdd() {
this.route.params.subscribe((params: Params) => {
let subroute = "getRefNumber";
this.managementArbo.getProducts(subroute)
.subs
浏览 0提问于2018-07-17得票数 0
我正在寻找使用Angular2的最新解决方案。我有一个图像列表，所以在我的模板中，我有：
<div *ngFor="let myImg of myImages">
<img src="{{myImg}}" />
</div>
myImages是加载在我的component.ts中的数组：
myImages: string[] = new Array();
这是“邮递员”和我试图在以下基础上建立的API调用：
在angular2中做这件事的最好方法是什么？
浏览 4提问于2016-12-06得票数 0
回答已采纳
2回答
我正在使用angular2和*ngFor构建一个动态表，如下所示，但是我看不到数据。我不确定{{xcol}}是不是正确，你知道吗？
<tr *ngFor="let x of exportList">
<td *ngFor="let col of cols">
{{x[col]}}
</td>
</tr>
浏览 0提问于2017-03-20得票数 0
1回答
我在angular 6中设置了一个反应式表单，其中有两个输入框(其中一个输入是可选输入)和一个提交按钮。如果我在一个输入框中输入一个值并按下submit，我需要通过从组件端设置相应的值来填充另一个输入框。如果我在两个输入框中都输入值，则会调用另一个函数。如果是这样的话，如何在表单控件中实现双向数据绑定呢？我试着使用ngModel，它并没有像预期的那样工作，从堆栈溢出的答案中，我了解到将ngmodel与表单控件一起使用很快就会被弃用。如果是这样，我如何才能实现同样的目标呢？下面是我使用的代码片段：
Component.ts：
export class myComponent implements
浏览 0提问于2019-10-10得票数 0
这已经让我抓狂了。
获得了一个隐藏的输入框，如下所示<input type='hidden' id='iFrameDrivenImageValue' value='n/a'>
我正在尝试从.ts中读取它的值以提交给DB。但无法编译TS。被如下所示的错误停止：ERROR in /Users/...component.ts (4773,89): Property 'value' does not exist on type 'HTMLElement'.
试用过<HTMLInputElement>
浏览 0提问于2018-01-08得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
