angular - 输入字段必须单击几次才能添加数字
问题描述
这是我的问题,我使用 ngModelChange 函数来触发和事件。当我给出多个组时,它会在其下方给出一些输入字段。但是新的输入字段只允许一个整数。如果我想输入另一个数字,我必须一次又一次地单击输入字段。例如,如果我想输入 100。我必须单击相同的输入字段 3 次。
这是html部分
<div class="row">
<div class="col-md-12">
<label>Number of Groups </label>
<input type="number" name="numberofGroups" #numberofGroups="ngModel" [(ngModel)]="StudentCountservice.formData.numberofGroups" (ngModelChange)="onValueChange($event)"class="form-control" required>
</div>
</div>
<div class="row" *ngFor="let grp of groups;let i=index " [attr.data-index]="i" >
<div class="col-md-12">
<label>Sizes of Group {{i+1}} </label>
<input type="number" name="sizeofGroups" #sizeofGroups="ngModel" [(ngModel)]="groups[i]" class="form-control"ng-model-option="{debounce:750}" required >
</div>
</div>
这是ts文件代码部分
onValueChange(newvalue){
this.groups=[];
for(var i=0;i<newvalue;i++){
this.groups[i]='';
}
}
这是stackblitz示例
解决方案
我找到了这个答案(https://github.com/angular/angular/issues/20589)。我将以下代码放入您的 stackblitz 中,它起作用了。试一试,如果你不能让它工作,请告诉我。
这是我的 stackblitz 叉子:https ://stackblitz.com/edit/angular-sa8ww6
app.component.ts
// imports and metadata
export class AppComponent {
name = 'Angular';
groups:any =[];
onValueChange(newvalue){
this.groups=[];
for(var i=0;i<newvalue;i++){
this.groups[i]='';
}
}
// Add this function
trackArray(index, item) {
return index;
}
}
app.component.html
添加trackBy: trackArray
到您的ngFor
循环中
<div class="row">
<div class="col-md-12">
<label>Number of Groups </label>
<input type="number" name="numberofGroups" #numberofGroups="ngModel" [(ngModel)]="test" (ngModelChange)="onValueChange($event)"class="form-control" required>
</div>
</div>
<!-- add the trackBy: trackArray to this ngFor -->
<div class="row" *ngFor="let grp of groups;let i=index; trackBy: trackArray " [attr.data-index]="i" >
<div class="col-md-12">
<label>Sizes of Group {{i+1}} </label>
<input type="number" name="sizeofGroups" #sizeofGroups="ngModel" [(ngModel)]="groups[i]" class="form-control"ngModelOptions="{updateOn: 'blur'}" required >
</div>
</div>
推荐阅读
- javascript - WSO2 EI - <(小于符号)在脚本中介(Javascript)中抛出错误
- android - 我怎样才能等到协程完成任务
- flutter - 如何从 API 获取数据然后在 Googlemap 小部件中调用它们
- php - 意外的标记 ”;” 使用 PHP,我已经检查了缺少的括号但找不到
- angular - 如何在Angular中连接之前检查websocket是否已启动
- git - 如何修复 Gitk 错误:预期为整数但得到“”
- ios - Swift 中的“in”与“inout”
- react-native - 处理多个条件并想要多个结果
- r - 使用 wellPanel 时控制输入的格式
- typescript - Vue TypeScript 在 init/created/mounted 上调用函数