Angular 中的多个 <input> 字段

Question

我目前正在尝试为 Angular 中的每个字母输入一个实际上不同的输入 9. 我目前似乎遇到的问题是变化检测。我看到的两种方式相互冲突。当我在 *ngFor 中使用自定义 trackBy 时，来自 @ViewChildren() 的 changes.subscribe() 不会更新，但我需要 trackBy 来防止各种更改问题在一个盒子里传播到另一个盒子里。我可以使用自定义 trackBy 函数，但它无法从我的组件访问数据。这是我的组件：

@Component({
  selector: 'app-multiple-fields',
  templateUrl: './multiple-fields.component.html',
  styleUrls: ['./multiple-fields.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => MultipleFieldsComponent),
    },
  ],
})
export class MultipleFieldsComponent
  implements OnInit, AfterViewInit, ControlValueAccessor {
  @Input() numFields: number = 6;
  @ViewChildren('input', { read: ElementRef }) inputs: QueryList<
    ElementRef
  >;
  fields: string[];

  onChange: any = () => {};
  onTouch: any = () => {};

  ngAfterViewInit() {
    this.inputs.changes.subscribe((next: QueryList<ElementRef>) => {
      let val = next.map((el) => el.nativeElement.value).join('');
      this.onChange(val);
      this.onTouch(val);
    });
  }

  ngOnInit() {
    this.fields = Array(this.numFields).fill('');
  }

  trackArray(index, item) {
    return index;
  }

  writeValue(value: string) {
    if (value.length == this.numFields) this.fields = value.split('');
  }

  registerOnChange(fn: any) {
    this.onChange = fn;
  }

  registerOnTouched(fn: any) {
    this.onTouch = fn;
  }
}

组件模板如下：

<input
  #input
  *ngFor="let item of fields; let i = index; trackBy: trackArray"
  [(ngModel)]="fields[i]"
/>

我希望能够检测到 fields[] 数组中的任何变化，然后使用连接值调用 onChange() 和 onTouch() 以便能够使用 [(ngModel)] 关于组件的使用。任何帮助将不胜感激。谢谢！

Answer 1

可能我不明白你想做什么，但你为什么不使用 angular 更改？

<input *ngFor="let item of fields" (change)="itemChanged(item)">

Angular 中的多个 <input> 字段

Multi-<input> Field in Angular

angular

typescript

ngfor