Angular：动态生成输入类型的 debounceTime

Question

我有一张卡片清单。卡列表是动态的，数据通过@Input 注入。每张卡都有一个“描述”输入。 目标是，当更新“描述”输入（keyup）时，它会自动等待 500 毫秒（debounceTime），然后自动将新值发送到父组件（将分派 ngrx 操作）。

除了“添加”debounceTime 之外，一切都很完美。我尝试使用 viewChildren 运算符、fromEvent 和 AfterViewInit 添加 debounceTime，但是即使我在 afterViewInit 方法内调用它，queryList 也是“未定义”。 我期望 queryList 可以作为 Angular 文档进行迭代，但事实并非如此。 卡的数量是动态的，所以我不能使用 formControl 作为 valueChanges() 方法。 你能指出我缺少什么吗？

export class ProductsDataComponent implements AfterViewInit{
  
  @ViewChildren('inputDesc', { read: ElementRef }) arrOfInputs!: QueryList<ElementRef>
  @Input() myborse!: IResource[];
  @Input() length!: number;
  @Input() pageSize!: number;
  @Input() pageSizeOptions!: number[];
  @Output() emitterBin: EventEmitter<string> = new EventEmitter();
  @Output() emitterUpdateBorsaTracking: EventEmitter<IProductCardUpdateTracking> = new EventEmitter();
  @Output() emitterUpdateBorsaDescription: EventEmitter<IProductCardUpdateDescription> = new EventEmitter();
  @Output() emitterPageChange: EventEmitter<PageEvent> = new EventEmitter();

  
  ngAfterViewInit(): void {
    this.arrOfInputs.forEach(input=>{
      fromEvent(input.nativeElement, 'keyup').pipe(
        debounceTime(500)
      )
      .subscribe(res => console.log('emitEvent to parent. This line is never triggered'));
    })
  }
 onChange=(id:string)=>{

  }
}

<div class="row">

    <div class="col-sm-6 col-md-4 col-12 col-lg-3" *ngFor="let borsa of myborse">
        <div *ngIf="borsa!==undefined">
            <mat-card class="example-card">
                <mat-card-header>
                    ...
                </mat-card-header>
                <div>
                    <ngb-carousel #carousel>
                        ...
                    </ngb-carousel>
                </div>

                <mat-card-content>
                    <mat-form-field class="example-form-field" appearance="outline">
                        <input matInput type="text" #inputDesc id={{borsa._id}} value="{{borsa.description}}"
                            placeholder="Description"
                            (input)="onChange(borsa._id)"
                            >
                    </mat-form-field>
                </mat-card-content>
                <mat-card-actions>
                    ...
                </mat-card-actions>
            </mat-card>
        </div>
    </div>
</div>
<mat-paginator #paginator 
    ...
</mat-paginator>

Answer 1

如果一切正常，没有

debounceTime

，则一定是变更检测问题。您可以手动注入

ChnangeDetectorRef

角度来检测变化。 如果这没有帮助，您可以更改方法，不直接对每个事件做出反应，并使用

setTimeout

延迟 500 毫秒