Question

我在角度2项目中使用Reactive表单模式。我想用答案动态填充容器（使用http调用获取和填充答案对象）。

反应式表单对象结构：

public questionDetailForm = this.fb.group({
    type    : ['', Validators.required],
    title   : ['', Validators.required],
    required: [false],
    answers : this.fb.array([])
});

帮助数组填充＆＃39;答案＆＃39; ＆＃39; questionDetailForm＆＃39;的关键对象：

public formArray = <FormArray>this.questionDetailForm.controls['answers'];

＆＃39; formArray＆＃39;由http调用响应数据填充：

if (response.data.question.answers != null && response.data.question.type_id !== 400 && response.data.question.type_id !== 800) {
    for (const key in response.data.question.answers) {
        if (response.data.question.answers.hasOwnProperty(key)) {
           this.formArray.push(new FormControl(response.data.question.answers[key] , Validators.required));
        }
    }
}

问题出现在html文件中（以粗体突出显示）：

<div fxLayout="row" fxFlexOffset="10" *ngFor="let answer of **questionDetailForm.controls['answers'];** let i = index" class="base-input-container answer-container">
    <md-input-container fxFlex="70" [ngClass]="{haserror: formErrors.answer && i === answerIndexError}">
       <input mdInput type="text" [formControl]="answer" placeholder="Answer">
    </md-input-container>
    <button type="button" fxFlexOffset="3" class="remove-answer" md-fab mdTooltip="remove answer" (click)="removeAnswer(i)" color="primary"><i class="material-icons">remove</i></button>
</div>

我刚刚从angular-cli beta版更新到1.0.0。我没有遇到使用测试版的同样问题。

Answer 1

您可以迭代public class CustomViewPager extends ViewPager { public CustomViewPager(Context context) { this(context, null); } public CustomViewPager(Context context, AttributeSet attrs) { super(context, attrs); init(); } /** * @return {@code false} since a vertical view pager can never be scrolled horizontally */ @Override public boolean canScrollHorizontally(int direction) { return true; } /** * @return {@code true} iff a normal view pager would support horizontal scrolling at this time */ @Override public boolean canScrollVertically(int direction) { return super.canScrollHorizontally(direction); } private void init() { // Make page transit vertical setPageTransformer(true, new VerticalPageTransformer()); // Get rid of the overscroll drawing that happens on the left and right (the ripple) setOverScrollMode(View.OVER_SCROLL_NEVER); } private static final class VerticalPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.75f; @Override public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 0) { // [-1,0] // Use the default slide transition when moving to the left page view.setAlpha(1); view.setTranslationX(0); view.setScaleX(1); view.setScaleY(1); } else if (position <= 1) { // (0,1] // Fade the page out. view.setAlpha(1 - position); // Counteract the default slide transition view.setTranslationX(pageWidth * -position); // Scale the page down (between MIN_SCALE and 1) float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } } }尝试：

FormArray

或者：

questionDetailForm.get('answers')

angular 2 NgFor仅支持绑定到诸如Arrays之类的Iterables

1 个答案: