[英]ViewChildren in dynamically rendered reactive form showing “undefined”
I'm trying to figure out how to dynamically render a form, and then cycle through each of the elements using @ViewChildren. 我试图弄清楚如何动态呈现表单,然后使用@ViewChildren循环遍历每个元素。 However, the query appears not to be finding anything as I'm getting a zero length array back in
ngAfterViewInit
at the bottom of the following code. 但是,查询似乎没有找到任何东西,因为我在以下代码底部的
ngAfterViewInit
中返回了一个零长度的数组。 (For reference, here's the Stackblitz: https://angular-4lqtap.stackblitz.io ). (作为参考,这里是Stackblitz: https ://angular-4lqtap.stackblitz.io)。 I've found several articles relating to this topic, but none have solved the issue I'm facing.
我找到了与该主题相关的几篇文章,但都没有解决我面临的问题。
import { Directive, Component, Input, OnInit, AfterViewInit, AfterContentInit, ViewChild, ViewChildren, ContentChildren, QueryList } from '@angular/core';
import {FormGroup, FormControl} from '@angular/forms';
@Directive({selector: '[foo]'})
export class IdVar {
// TODO(issue/24571): remove '!'.
@Input() idString !: string;
}
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>
<form #myForm="ngForm" [formGroup]="form">
<ng-container *ngFor="let itm of testArr; let i = index">
{{i}}: <input [foo] [id]="i" />
<foo [idString]="i">{{i}}: </foo>
</ng-container>
</form>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit, AfterViewInit {
@Input() name: string;
form: FormGroup;
formControls={};
testArr = ["a", "b", "c"];
@ViewChildren('foo') id: QueryList<IdVar>;
ngOnInit() {
this.form = new FormGroup(this.formControls);
this.testArr.forEach((itm)=>{
this.formControls[itm] = new FormControl(itm);
this.form.addControl(itm, this.formControls[itm]);
})
}
ngAfterViewInit() {
setTimeout(()=>console.log(this.id.length),1000);
}
}
Any idea what I'm doing wrong? 知道我在做什么错吗? Any solutions or workarounds?
任何解决方案或解决方法? Tks!
Tks!
NEW ADDITION BELOW (got rid of earlier "undefined" error): 下面是新的添加项(摆脱了之前的“未定义”错误):
app.module.ts app.module.ts
import { NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ],
schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
There is some changes that you need to do: 您需要做一些更改:
You need to add the directive in the declarations
in the app.module.ts
. 您需要在
app.module.ts
的declarations
中添加指令。
import { NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent, IdVar } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
declarations: [ AppComponent, HelloComponent, IdVar ],
bootstrap: [ AppComponent ],
schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
You are using a directive as a component, I think you dont need this line: 您正在使用指令作为组件,我认为您不需要此行:
<foo [idString]="i">{{i}}: </foo>
The ViewChildren works with classes not with the selector,so you should change the line: ViewChildren使用的类不适用于选择器,因此应更改以下行:
@ViewChildren('foo') id: QueryList<IdVar>;
to: 至:
@ViewChildren(IdVar) id: QueryList<IdVar>;
Another note, you don't really need the extra [] in the directive 另外请注意,您实际上不需要在指令中使用额外的[]
<input foo [id]="i" />
I forked your example on stackblitz and modified it a little to make it work. 我在stackblitz上为您的示例进行了分叉,并对其进行了一些修改以使其起作用。 I also changed the name of the directive to make it clear that it is a directive.
我还更改了指令的名称,以明确表明它是指令。
Live example here: 现场示例:
https://stackblitz.com/edit/angular-directive-viewchildren?file=src%2Fapp%2Fhello.component.ts https://stackblitz.com/edit/angular-directive-viewchildren?file=src%2Fapp%2Fhello.component.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.