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);
    }
}

如何使用angular2循环包含多个div的div

1 个答案: