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

您需要做一些更改：

您需要在declarations的{{1}}中添加指令。

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

ViewChildren不能与选择器一起使用的类，因此应更改以下行：

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

收件人：

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

另一个说明，您实际上并不需要指令中的额外[]

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

我在stackblitz上为您的示例进行了分叉，并对其进行了一些修改以使其起作用。我还更改了指令的名称，以明确表明它是指令。

此处的示例：

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

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

1 个答案: