如何在 [ngClass] 和 ngIf 中使用动态局部模板变量

Question

我在 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>

我需要验证控件，但出现此错误：

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 

我的问题是如何在 angular 4 中使用 [ngClass] 和 ngIf 中的局部模板变量？

Answer 1

您不需要在循环的每次迭代中为模板引用变量指定不同的名称ngFor。给它一个普通的名字，比如#durationTime. 的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>