多重<输入>Angular中的字段。

Question

我目前正在尝试在Angular 9中做一个输入，实际上是每个字母的不同输入。我目前似乎遇到的问题是变化检测。我看到的两种方法是相互冲突的。changes.subscribe() 从 @ViewChildren() 当我使用自定义的 trackBy 在我 *ngFor但我需要的是 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 change？

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