ViewChildren 以动态呈现的反应形式显示“未定义”

Question

我试图弄清楚如何动态呈现表单，然后使用@ViewChildren 循环遍历每个元素。但是，查询似乎没有找到任何东西，因为我在以下代码底部的ngAfterViewInit 中得到了一个零长度数组。 （作为参考，这里是 Stackblitz：https://angular-4lqtap.stackblitz.io）。我找到了几篇与此主题相关的文章，但都没有解决我面临的问题。

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}}:&nbsp;</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);
  }

}

知道我做错了什么吗？任何解决方案或解决方法？谢了！

下面的新添加（摆脱了早期的“未定义”错误）：

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 { }

Answer 1

您需要做一些更改：

你需要在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 { }

您正在使用指令作为组件，我认为您不需要这一行：

<foo [idString]="i">{{i}}:&nbsp;</foo>

ViewChildren 可以使用类而不是选择器，所以你应该改变这一行：

@ViewChildren('foo') id: QueryList<IdVar>; 

到：

@ViewChildren(IdVar) id: QueryList<IdVar>;  

另外注意，你真的不需要指令中额外的 []

 <input foo [id]="i" />

我在 stackblitz 上复制了您的示例，并对其进行了一些修改以使其正常工作。 我还更改了指令的名称，以明确它是指令。

此处的示例：

https://stackblitz.com/edit/angular-directive-viewchildren?file=src%2Fapp%2Fhello.component.ts