如何使用angular2遍历包含多个div的div

Question

我有一个要求，用户将被问到从 1 到 5 的一系列问题，并且这些问题将循环出现，例如用户首先回答第一个问题，然后单击下一个问题旁边，他也可以转到上一个问题。 当问题结束时，他将提交。

我正在尝试遍历包含多个 div 螺母的 div 我在使用角度 2 中的视图子时遇到错误

虚拟数据

 <div #message>
           <div>
               Here
           </div>
           <div>
               Here again
           </div>
       </div>
    </div>


<div *ngFor = "let in of input">
    {{in}}
</div>


@ViewChild('message') input :ElementRef;

控制台日志

XCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/questioncomponent/question.component.html:14:5 caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at new Error (native)
    at NgFor.ngOnChanges (http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js:1646:31) [angular]
    at Wrapper_NgFor.ngDoCheck (/CommonModule/NgFor/wrapper.ngfactory.js:49:20) [angular]
    at DebugAppView.View_QuestionComponent0.detectChangesInternal (/AppModule/QuestionComponent/component.ngfactory.js:102:20) [angular]
    at DebugAppView.AppView.detectChanges 

Answer 1

以下代码应该可以工作。 For loops 需要输入一个数组。但是，如果没有比使用ElementRef 更好的方法来解决您的问题，您应该重新考虑。见the API

你的模板

<div #message>
    <div>
        Here
     </div>
     <div>
        Here again
     </div>
   </div>
</div>

在你的组件中

@ViewChild("message") message:any;

ngAfterViewInit() {
  for (let div of this.message.nativeElement.children) {
        console.log(div.textContent);
    }
}