[英]How to use of dynamic local template variable inside [ngClass] and ngIf
I have the following HTML component in angular 4: 我在angular 4中有以下HTML组件:
<div *ngFor="let item of items; let i = index" class="row">
<div class="col-md-7">
<select
class="form-control form-control-sm"
name="durationTime{{i}}"
required
[(ngModel)]="item.durationTime"
#durationTime{{i}}="ngModel"
[ngClass]="{'is-valid': durationTime{{i}}.valid && durationTime{{i}}.touched, 'is-invalid': durationTime{{i}}.invalid && durationTime{{i}}.touched}">
<option [ngValue]="null" disabled selected>Elige</option>
<option *ngFor="let item of durationTimes" [ngValue]="item"> {{item}} </option>
</select>
<small *ngIf="durationTime{{i}}.invalid && durationTime{{i}}.touched"
class="form-text text-muted-error">
!Debes seleccionar una opción!
</small>
</div>
</div>
I need to validate the controls but I have this error: 我需要验证控件,但出现此错误:
Parser Error: Got interpolation ({{}}) where expression was expected at column 25 in [{'is-valid': durationTime{{i}}.valid && durationTime{{i}}.touched, 'is-invalid': durationTime{{i}}.invalid && durationTime{{i}}.touched}] in
My question is how to use of local template variable inside [ngClass] and ngIf in angular 4? 我的问题是如何在angular 4的[ngClass]和ngIf内部使用局部模板变量?
You don't need to give a different name to the template reference variable in each iteration of the ngFor
loop. 您无需在
ngFor
循环的每次迭代中为模板引用变量指定其他名称。 Just give it a normal name, like #durationTime
. 只要给它一个普通的名字,如
#durationTime
。 The ngClass
binding and the ngIf
condition will use the instance of the variable specific to the iteration of the loop. ngClass
绑定和ngIf
条件将使用特定于循环迭代的变量的实例。
<div *ngFor="let item of items; let i = index" class="row">
<div class="col-md-7">
<select
class="form-control form-control-sm"
name="durationTime{{i}}"
required
[(ngModel)]="item.durationTime"
#durationTime="ngModel"
[ngClass]="{'is-valid': durationTime.valid && durationTime.touched, 'is-invalid': durationTime.invalid && durationTime.touched}">
<option [ngValue]="null" disabled selected>Elige</option>
<option *ngFor="let item of durationTimes" [ngValue]="item"> {{item}} </option>
</select>
<small *ngIf="durationTime.invalid && durationTime.touched"
class="form-text text-muted-error">
!Debes seleccionar una opción!
</small>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.