Question

在输入更改后，我试图将焦点设置为任何给定的输入（或可能以其他方式操纵同一DOM元素）。我使用的是反应式表单，并且Form元素是动态呈现的。

我遇到的问题是，我可以使用@ViewChildren(AppTag) ipt!: QueryList<AppTag>访问已更改的元素，这使我可以过滤所需的元素，但是我不知道如何使用{{ 1}}，或者我可以使用nativeElement，这（令人惊讶地）似乎让我过滤了有问题的元素，但（同样令人惊讶的是）我仍然无法操纵DOM元素。无论哪种方式，我都会收到错误消息：@ViewChildren(AppTag) ipt!: QueryList<ElementRef>。

要重现该错误，请在以下StackBlitz的"itm.nativeElement is undefined"中输入任意值，然后从该条目中输入Inputs。您会在控制台中看到错误。

以下是我认为是相关的代码，但是请尝试使用完整的StackBlitz示例，以更清楚地看到模板和数据结构：

TAB

app.component.ts

这是指令export class AppComponent implements OnInit { @ViewChildren(AppTag) ipt !: QueryList<ElementRef> name = 'Angular'; formCtls: any = {}; form: FormGroup = new FormGroup({}); data: {} = { // raw data name: { first: {values: [""], label: "first name"}, middle: {values: [""], label: "middle name"}, last: {values: [""], label: "last name"} } }; dispData: any[] = []; // Data formatted for display/iteration by template itmNo: number = 0; // Unique ID for each Input focusItm = 0; // The bridge by which "FormControl.valueChanges" communicates with "QueryList.changes" . . . . . . ngAfterViewInit() { this.ipt.changes.subscribe(list=>{ setTimeout(()=> list.filter(itm=>+itm.id===this.focusItm).forEach(itm=>{ console.log(`Item: ${itm.id} Focus: ${this.focusItm} ${+itm.id===this.focusItm}`); itm.nativeElement.focus(); // <-- HERE'S WHERE I'M HAVING THE TROUBLE } ),0)} ) } . . . . . . renderDisplayArray(){ this.dispData = []; this.itmNo = 0; . . . . . . const i=r; this.formCtls[ctlName] = new FormControl(itm["values"][r], {updateOn: 'blur'}); this.form.addControl(ctlName,this.formCtls[ctlName]); const curItm=this.itmNo; this.formCtls[ctlName].valueChanges.subscribe(val=>{ console.log(`VALUE: ${val}`); itm["values"][i]=val || ''; this.renderDisplayArray(); this.focusItm = curItm; }) . . . . . .，我将其应用于输入，以便能够AppTag并获取所需的DOM元素。 appTag.ts

filter

Answer 1

只需将可见性从el: ElementRef中的AppTag更改为公开

@Directive({
  selector: '[appTag]'
})
export class AppTag implements OnInit{
   constructor(public el: ElementRef) {}
   @Input('appTag') id: number;
}

并在过滤器功能中使用el的{{1}}属性。

将您的问题行更改为此：

AppTag

筛选属性时，如何在ViewChildren QueryList中将特定项作为ElementRef获取？

1 个答案: