访问ngfor中的本地变量

你可以给 template reference variables ,并照常提及它们。变量是为 ngFor 循环并在该迭代的上下文中可用(请参见 this stackblitz 例如)。如果标记用于 form 标记,确保每个 input 字段具有唯一的 name .

<div *ngFor="let p of model; let i=index">

    <input 
      type="text" 
      required 
      [(ngModel)]="p.ti" 
      #ti="ngModel" 
      #tiRef 
      [name]="'ti' + i">

    <div class="counter">
        {{ tiRef.getAttribute('maxlength') - tiRef.value.length }}
    </div>

    <div *ngIf="ti.touched && !ti.valid && ti.errors && ti.errors.required">
        Please enter a title.
    </div>

</div>

你需要的是 ViewChildren

下面是您可以尝试使用它的一种方法。

@ViewChildren('tiChildren') tiChildren: QueryList<any>;

tiChildrenArray: any[] = [];

constructor() {
    tiChildrenArray = this.tiChildren.toArray();
}


<div *ngFor="let p of model; index as i">

    <!-- field -->
    <input
        type="text" 
        required
        [(ngModel)]="p.ti"
        #tiChildren
        id="ti"
        name="ti"
    >

    <!-- counter -->
    <div class="counter">
        {{ (tiChildrenArray[i].getAttribute('maxlength')) - tiChildrenArray[i].value.length }}
    </div>
</div>